vue 2.0与vue3.0的区别
1. vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()
对数据进行劫持 结合 发布订阅模式
的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI
对数据代理。
相比于vue2.x,使用proxy的优势如下
1.defineProperty只能监听某个属性,不能对全对象监听,而proxyAPI
则可以监听整个对象
2.可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
3.可以监听数组
,不用再去单独的对数组做特异性操作 vue3可以检测到数组内部数据
的变化
2.移除过滤器filters
vue3x删除了filters 并推荐使用computed代替计算属性
,在2x中filters和computed有许多相似之处,这个不仅增加了学习成本也增加了维护成本,因此在3.0的中完全摒弃了filters。
3.生命周期的变化移除了beforeCreate()和Created()
新增了setup()
.在剩余六个函数之前加入了on
(setup() 函数与vue3.2的 script setup 是vue3中的一个大亮点)
4.支持多节点组件
在2.0中我们需要 在template标签内包一个div来防止用户意外创建多根组件时发出的警告,即
<template>
<div>
<header></header>
<main></main>
<footer></footer>
</div>
</template>
但在3.0中这样做不是必须的 。
5.vue中的组织代码模式
在vue2中我们会在一个vue文件中methods,computed,watch,data中等等定义属性和方法,共同处理页面逻辑,我们称这种方式为 Options API
但缺点是一个功能往往需要在不同的vue配置项中定义属性和方法,比较分散,项目小还好,清晰明了,但是项目大了后,一个methods中可能包括包含20多个方法,你往往分不清哪个方法对应着哪个功能
而在在vue3 Composition API 中,我们的代码是根据逻辑功能来组织的,一个功能所定义的所有api会放在一起(更加的高内聚,低耦合),这样做,即时项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有API,而不像vue2 Options API 中一个功能所用到的API都是分散的,需要改动功能,到处找API的过程是很费劲的。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭