阅读 1368

【vue3系列】1.快速入门vue3,通过实例对比vue3和vue2区别

vue3出来一段时间了,项目中还没有真正实践,只是写了些简单的demo。vue3相比vue2改动还是非常大的,相信不久vue3将会成为主流,打算写个系列作为学习输出。

关于两者的区别相信都能说出很多知识点,但是知识点不使用感受还是不大。这篇文章通过一个简单的实例分析下两者的区别。

1. 入门demo

我们先来感受下vue3使用最简单的写法,新建一个html,引入vue3的cdn地址(官网文档提供的地址),代码如下:

<html>
    <body>
        <div id="app">
            <h4>{{info.msg}}</h4>
            <div>{{title}}</div>
            <button @click="changeTitle">改变title</button>
        </div>
        // 引入vue3.0
        <script src="https://unpkg.com/vue@next"></script>
        // vue3实例写法
        <script>
            // 通过解构方式拿到相关方法
            const {createApp, reactive, ref} = Vue;
            const app = createApp({
                // setup是新增的生命周期函数,作为总启动入口,其他生命周期、方法,变量声明定义都要写到这个函数里面
                setup() {
                    // 基本类型变成响应式,init是变量title的初始值
                    let title = ref('init');
                    // 引用类型变成响应式
                    let info = reactive({msg: 'hello vue3'});
                    const changeTitle = () => {
                        // 基本类型改变值需要.value
                        title.value = 'change title';
                        info.msg = 'msg'
                    }
                    // 模板中用到的变量和方法都需要return,不然不会生效(一开始方法changeTitle没return,排查了半天才发现没有return出来)
                    return {
                        info,
                        title,
                        changeTitle
                    }
                }
            });
            // 挂载id为app的dom元素
            app.mount('#app');
        </script>
    </body>
</html>
复制代码
     // vue2 实例写法

        <script>
         const app = new Vue({
             // 这里不传,需要app.$mount('#app')挂载
             el: '#app',
             data: {
                 title: 'hi, vue2'
             },
             // 方法
             methods: {
                 changeTitle() {
                     this.title = 'change title';
                 }
             }
         })
        </script>
复制代码

2. 主要区别点

2.1 挂载方式

  • vue3.0可以通过解构的方式拿到createApp方法,通过该方法得到app调用mount进行挂载。这也是vue3函数式编程的设计理念,这种设计方式可以按需引入资源,更好的利用tree-shaking来减小打包体积。

  • vue2.0 是通过new Vue创建实例,通过参数el确定挂载的dom进行挂载,也可以不传el直接使用app.$mount('#app')

可见vue3.0功能模块拆分的更加细,可以单独使用某个功能(例如响应式),实现真正的按需使用。

挂载流程对应源码文件packages/vue--> packages/runtime-dom --> packages/runtime-core/renderer 可以看到createApp等方法,如图所示:

7e0f0aee54cd78b3d4d8f591fdea137e.jpg

2.2 生命周期函数

vue3中移除了beforeCreate 和 created,增加了setup函数。其他周期函数基本就是命名上在vue2.x的基础上加上on前缀,以驼峰命名方式命名,要写到setup函数里面。

此外还增加了onRenderTracked和onRenderTriggered是用来调试的,这两个事件都带有一个DebuggerEvent,它使我们能够知道是什么导致了Vue实例中的重新渲染。

vue3.0采用函数式编程方式,打破了this的限制,能够更好的复用性,真正体现实现功能的高内聚低耦合,更利于代码的可扩展性和可维护性。

2.3 数据响应方式

  • vue3.0提供了reactive和ref,一般ref可以用来定义基础类型,也可以是引用类型,reactive只能用来定义引用类型。

    ref的本质就是reactive({value: 原始数据}),例如Ref(10)=>Reactive({value:10});

    对于引用类型,什么时候用ref,什么时候用reactive?简单说,如果你只打算修改引用类型的一个属性,那么推荐用reactive,如果你打算变量重赋值,那么一定要用ref。

    ref定义的变量通过变量.value = xxx 改变,reactive定义的变量通过 obj.xx = xx 即可。

  • vue2.0直接将数据放到了data中,通过this.xx = xx 来改变。

针对数据响应原理两者变化很大,vue2.0是利用object.defineProperty,vue3.0是利用Proxy和Reflect来实现,最大的优势就是vue3.0可以监听到数组、对象新增/删除或多层嵌套数据结构的响应。

上面几点是明显的区别点,还有很多隐形的区别点,比如编译阶段做了很多性能优化和打包体积更好的利用tree-shaking。

3. 总结

刚开始使用可能会有些不习惯,毕竟打破了原有的开发习惯。随着对vue3理解越深,发现vue3还是挺香的,打破现有舒适区才能迎接更好的舒适区。

感谢点赞支持哟~

附上webpack系列历史文章:

【webpack系列】从源码角度分析webpack打包产出及核心流程

【webpack系列】从源码角度分析loader是如何触发和执行的

【webpack系列】webpack是如何解析模块的

【webpack系列】webpack的plugin插件是如何运行的

【webpack系列】从源码角度分析webpack热更新流程

【webpack系列】从源码角度深度剖析html-webpack-plugin执行过程

文章分类
前端
文章标签