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

更新日期: 2022-07-18阅读: 80标签: Vue3

随着 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 的一一对应关系:

options API

composition API

beforeCreate

Not Needed

created

Not Needed

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeUnmount

onBeforeUnmount

unmounted

onUnmounted

errorCaptured

onErrorCaptured

renderTracked

onRenderTracked

renderTriggered

onRenderTriggered

activated

onActivated

deactivated

onDeactivated

想用哪个生命周期函数,就从 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>

来源: 江南一点雨

链接: https://www.fly63.com/article/detial/11908

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!