关于java:一个-Java-猿眼中-Vue3-和-Vue2-的差异

随着 TienChin 我的项目视频的录制，松哥终于也要静下心来，认真捋一捋 Vue3 中的各种新个性了，而后再和小伙伴们进行分享，其实 Vue3 中还是带来了很多陈腐的玩意，明天咱们就不卷 Java 了，来卷卷前端。

以下内容是一个 Java 猿对 Vue3 的了解，次要是利用层面上，如果有业余的前端小伙伴，请轻拍。

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>

先从大的方面来看，细节实现咱们前面再细聊。

大的方面，就是在这个 export default 中，当前就只有两个元素了，name 和 setup，咱们以前的各种办法定义、生命周期函数、计算属性等等，都写在 setup 中，并且须要在 setup 中返回，setup 中返回了什么，下面的 template 中就能用什么。

这种写法略微有点麻烦，所以还有一种简化的写法，像上面这样：

<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>

这种写法就是间接在 script 标签中退出 setup，而后在 script 标签中该怎么定义就怎么定义，也不必 return 了。这个场景，又有点 jQuery 的感觉了。

下面这个实现里有几个细节，咱们再来具体说说。

2. 生命周期

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

以前 Vue2 里的写法有一个专业名词叫做 options API，当初在 Vue3 里也有一个专业名词叫做 composition API。在 Vue3 中，这些对应的生命周期函数都要先从 vue 中导出，而后调用并传入一个回调函数，像咱们上一大节那样写。

下图这张表格展现了 options API 和 composition API 的一一对应关系：

想用哪个生命周期函数，就从 vue 中导出这个函数，而后传入回一个回调就能够应用了。例如第一大节中松哥给大家举的 onMounted 的用法。

3. 计算属性

除了生命周期函数，计算属性、watch 监听等等，用法也和生命周期函数相似，须要先从 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 里边，如果咱们想要定义响应式数据，个别都是写在 data 函数中的，相似上面这样：

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

然而在 Vue3 里边，你曾经看不到 data 函数了，那怎么定义响应式数据呢？就是通过 ref 或者 reactive 来定义了。

在第一大节中，咱们就是通过 ref 定义了一个名为 a 的响应式变量。

这个 a 在 script 中写的时候，有一个 value 属性，不过在 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、Boolean、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>

这个时候点击更新按钮，你会发现没反馈！因为用了数据开展之后，响应式就生效了。所以，对于这种开展的数据，应该再用 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 标签中，那么能够间接依照如下形式来开展数据：

<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 和 Vue2 还有其余一些差别，这些咱们都将在 TienChin 我的项目视频中和小伙伴们再认真分享。