一个 Java 猿眼中 Vue3 和 Vue2 的差异

随着 TienChin 项目视频的录制,松哥总算也要静下心来,认真捋一捋 Vue3 中的各种新特性了,然后再和小伙伴们进行共享,其实 Vue3 中仍是带来了很多新鲜的玩意,今日咱们就不卷 Jjava编译器av监控安装流程a 了,来卷卷html简单网页代码前端

以下内容是一个 Java 猿对 Vue3 的理解,主要是应用层java怎么读面上,假如有专业的前端小伙伴,请轻拍。

1. script 写法

进入到 Vue3 年代,最明显的感触便是在一个 .vue 文件中,script 标签的写法大变样了。曾经在 Vue2 中,咱们都是这样写的:

<script>
    export default {
        name: "SysHr",
        data() {
            return {
                //
            }
        },
        mounted() {
            //
        },
        methods: {
            deleteHr(hr) {
                //
            },
            doSearch() {
                //
            }
        }
    }
</script>

不过到了 Vue3 里面,这个写法变了,变成下面这样了:

<template>
    <div>
        <div>{{a}}</div>
        <div>{{result}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>
<script>
    import {ref} from 'vue';
    import {onMounted,computed} from 'vue'
    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            onMounted(() => {
                a.value++;
            });
            const result = computed(()=>{
                return Date.now();
            });
            return {a,btnClick,result}
        }
    }
</script>

先从大的前端开发方面来看,细节完成咱们后面再细监控家用远程手机聊。

大的方面,便是在这个 exporjava培训t default 中,今后就只有两个元素了,name 和 setup,咱们曾经的各种方法界说、生命周期函数、核算特点等等,都写在 setup 中,而且需要在 setup 中回来,setup 中回来了什么,上面的 template 中就能用什么。前端和后端哪个工资高

html标签属性大全种写法略微有点费事,所以还有一种简化的写法,像下面这样:

<template>
    <div>
        <div>{{a}}</div>
        <div>{{result}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    import {onMounted, computed} from 'vue'
    const a = ref(1);
    const btnClick = () => {
        a.value++;
    }
    onMounted(() => {
        a.value++;
    });
    const result = computed(() => {
        return Date.now();
    });
</script>

这种html个人网页完整代码写法便是直接在 script 标签中参加 setup,然后在 script 标签中该怎样界说就怎样界说,也不必 return 了。这个场景,又有点 jQuery 的感觉了。

上面这个完成Java里有几个细节,咱们再来具体说说。

2. 生命周期

首先便是生命周期函数的写法。

曾经 Vue2 里的写监控app下载法有一个专业名词叫做 options API,现在在 Vue3 里也有一个专业名词叫做 composition API。在 Vue3 中,这些对应的生命周期函数都要先从 vue 中导出,然后调用并传入一个回调函数,像咱们上一末节那样写。

下图这张表格展示了 opti变量类型有哪些ons API 和 comhtml标签position API 的一一对应联系:

options APIcomposition监控摄像头 API
beforeCreateNot变量 Needed
createdNo前端t Needed
mountedonMounted
beforjava环境变量配置eUpdateonBeforeUpdate
updatedonUpdated
beforeUnmou变量之间的关系ntonBeforeUhtml标签nmount
un变量的定义mountedonUnmounted
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRe前端和后端nderT变量之间的关系riggered
activahtmltedonActivated
deactivated监控系统onDeactivated

想用哪个生命周期函数,就从 vue 中导出这个函数,然后传入回一个回调就能够运用了。例如榜首末节中松哥给咱们监控摄像头举的 onMounted 的用法。

3. 核算特点

除了生命周期函数,核算特点、watch 监听等等,java语言用法也和生命周期函数html代码类似,需要先从 vue 中导出,导出之后,也是传入一个回调函数就能够运用了。上文有例子,我就不再烦琐了。

像 watch 的监控,写法如下:

<script>
    import {ref} from 'vue';
    import {onMounted,computed,watch} from 'vue'
    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            onMounted(() => {
                a.value++;
            });
            const result = computed(()=>{
                return Date.now();
            });
            watch(a,(value,oldValue)=>{
                console.log("value", value);
                console.log("oldValue", oldValue);
            })
            return {a,btnClick,result}
        }
    }
</script>

导入 watch 之后,然后直接运用即可。

4. ref 于 reactive

上面的例子中还有一个 ref,这个玩意也需要跟咱们介绍下。

在 Vue2 里面,假如咱java模拟器们想要界说呼应式数据,一般都是写在 data 函数中的,类似下面这样:

<script>
    export default {
        name: "SysHr",
        data() {
            return {
                keywords: '',
                hrs: [],
                selectedRoles: [],
                allroles: []
            }
        }
    }
</script>

但是在 Vue3 里面,你已经看不到 data 函数了,那怎样界说呼应式数javascript据呢?便是经过 ref 或者 reactive 来界说了。

在榜首末节中,咱们便是经过 ref 界说了一个名为 a 的呼应式变量

这个 ahtml简单网页代码 在 scrip前端t 中写的时分,有一个 value 特点,不html标签过在 HTML 中引证的时分,是没有 value 的,可千万别写成了 {{a.value}},咱们再来回顾下上文的案例:

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
    </div>
</template>
<script>
    import {ref} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const btnClick=()=>{
                a.value++;
            }
            return {a,btnClick}
        }
    }
</script>

现在便是经过这样的方法来界说呼应式目标,修正值的变量值时分,需要用 a.value,但是真正的上面的 template 节点中拜访的时分是不需要 value 的(注意,函数也得回来后才能在页面中运用)。

和 Vue2 比较,这种写法有一个很大的好处便是在方法中引证的时分不必再写 this 了。

ref 一般用来界说原始数据类型,像 String、Number前端开发需要学什么、BigInt、B监控安装流程oolean、Symbol、Null变量是什么意思、Undefined 这些。

假如你想界说目标,那么能够运用 reactive 来界说,如下:

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{book.name}}</div>
        <div>{{book.author}}</div>
    </div>
</template>
<script>
    import {ref, reactive} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三国演义",
                author: "罗贯中"
            });
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick,book}
        }
    }
</script>

前端面试题儿界说了 book 目标,book 目标中包含了 name 和 author 两个特点。

有的时分,你可能批量把数据界说好了,但是在拜访的时分却希望直接拜访,那么咱们能够运用数据打开,像下面这样:

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
    </div>
</template>
<script>
    import {ref, reactive} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三国演义",
                author: "罗贯中"
            });
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick,...book}
        }
    }
</script>

这样,在上面拜访的时分,就能够直接拜访 name 和 author 两个特点了,就不必增加 book 前缀了。

不过!!!

这种写法其实有一个小坑。

比如我再增加一个按钮,如下:

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新图书信息</button>
    </div>
</template>
<script>
    import {ref, reactive} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三国演义",
                author: "罗贯中"
            });
            const btnClick = () => {
                a.value++;
            }
            const updateBook=()=>{
                book.name = '123';
            }
            return {a, btnClick,...book,updateBook}
        }
    }
</script>

这个前端和后端哪个工资高时分点击更新按钮,你会发现没反应!因为用了数据打开之后,呼应式就失效了javaee。所以,关于这种打开HTML的数据,应该再用 toRefs 来处理下,如下:

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新图书信息</button>
    </div>
</template>
<script>
    import {ref, reactive, toRefs} from 'vue';
    export default {
        name: "MyVue04",
        setup() {
            const a = ref(1);
            const book = reactive({
                name: "三国演义",
                author: "罗贯中"
            });
            const btnClick = () => {
                a.value++;
            }
            const updateBook = () => {
                book.name = '123';
            }
            return {a, btnClick, ...toRefs(book),updateBook}
        }
    }
</script>

当然,假如你将 setup 直接写在了 script 标签java编译器中,那么能够直接按照如下方法来打开数据:

<template>
    <div>
        <div>{{a}}</div>
        <button @click="btnClick">clickMe</button>
        <div>{{name}}</div>
        <div>{{author}}</div>
        <button @click="updateBook">更新图书信息</button>
    </div>
</template>
<script setup>
    import {ref, reactive, toRefs} from 'vue';
    const a = ref(1);
    const book = reactive({
        name: "三国演义",
        author: "罗贯中"
    });
    const btnClick = () => {
        a.value++;
    }
    const updateBook = () => {
        book.name = '123';
    }
    const {name, author} = toRefs(book);
</script>

5. 小结

好啦,今日就和小伙伴们共享了 Vue3 中几个新鲜的玩法~作为咱们 TienChin 项目的基础(Vue 基本用法在 vhr 中都已经讲过了,所以这儿就不再赘述了),当然,Vue3 和 Vue变量名2 还有其他一些差异,这些咱们都将在 TienChin 项目视频中和小伙伴们再细心共享。

  • 我正在参加技能社区创作者签约计划招募活动,点击链接报名投稿。

发表评论

提供最优质的资源集合

立即查看 了解详情