您现在的位置是:首页 >学无止境 >vue2和vue3的区别网站首页学无止境
vue2和vue3的区别
虽然现在还有很多用vue2的项目,甚至有新启动的项目还基于vue2。但vue3作为 vue 的主流开发技术栈,仍然是必然的趋势。因为现在 vue 官网文档也是 vue3 的版本了,指不定哪天要找 vue2 的文档都要花点功夫了。
近期整理一下 vue2 和 vue3 的不同点,希望对读到这篇文章的小伙伴从vue2过渡到vue3有些许帮助。
先来看下 vue2 和 vue3 有哪些相同点,至少先知道技术升级到 vue3 没有看起来那么难。
1、vue3 中还是可以使用选项式 api 的写法,我们熟悉的data、props、computed、methods、watch、mixins 这些选项都还在;
2、created、mounted 等生命周期钩子函数也还是熟悉的味道;
3、模板语法基本上一致,我们还是可以用 v-bind 绑定数据,v-on 绑定事件,v-if 和 v-for 渲染元素等等;
总结一下,即使不使用 vue3 新增的那些特性,也还是可以完成日常开发工作的。
不过,如果项目是使用 vue3 技术栈开发的,应该大部分人都会尝试适应vue3 组合式 api 语法。如果其他同事开发的模块用的都是组合式 api,唯独你还是用选项式 api,多少会有些违和感的。接下来看看 vue3 新增了哪些新特性
一、创建实例的方式不同
vue2 使用 new Vue({ ...选项 }) 构造函数的方式创建;
vue3 通过内置的 createApp( //根组件 ) 方法创建。
二、Vue3 新增的片断特性,允许单文件组件中的 template 元素下可以有多个节点
在 Vue 2 中的组件中的顶层 <template> 块不支持多个节点,通常都是用一个 div 元素包含所有节点或组件,如:
<template>
<div>
<div class=”top”>…</div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
影响虽然不大,但最终生成的页面中会有很多不必要的节点嵌套,有经验的前端开发工程师应该都深有体会,特别是有强迫症会更觉得难受。
在Vue 3 中解决了这个问题,组件中可以包含多个节点,如下所示:
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
现在这样写的组件,当组件嵌套很多级的时候,可以节省很多嵌套的节点。不过记得显示定义 attribute 分布的位置。
三、vue3的响应式原理实现不一样
vue2的双向数据绑定是使用 Object.definepropert() 对数据进行劫持,结合发布订阅模式实现。
vue3中使用了es6的proxyAPI对数据进行处理。
使用proxy 可以劫持整个data对象,然后递归返回属性的值的代理即可实现响应式。
vue3发生了改变,使用proxy替换Object.defineProerty,使用Proxy的优势:
1)可直接监听数组类型的数据变化
2)性能的提升
3)监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升
4)可直接实现对象属性的新增/删除
四、新增了一些组件
比如 <teleport> 内置组件可以将内容挂载到指定的目标元素。
五、删除了过滤器
在 vue2 中过滤器就用得很少了,我只在 vue1 的时候用得比较多。对于习惯用过滤器的开发者可能有少许影响。
六、新增和修改了生命周期钩子函数
比如 destroyed 生命周期钩子被重命名为 unmounted;
新增了 renderTracked、serverPrefetch 等钩子函数;
在组合式 api 中不同的调用方式。
beforeCreate -> setup() 开始创建组件之前,创建的是data和method
created -> setup()
beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。
mounted -> onMounted 组件挂载完成后执行的函数
beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。
updated -> onUpdated 组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。
destroyed -> onUnmounted 组件卸载之前执行的函数。
activated -> onActivated 组件卸载完成后执行的函数
deactivated -> onDeactivated 在组件切换中老组件消失的时候执行
七、组合式 API
组合式 API 是 vue3 最大的一个变化,也是很多熟悉 vue2 的开发者最需要适应的方法。
1)可以在单文件组件中使用组合式 API 的编译时语法糖 <script setup>,有使代码更简洁、更好的运行时性能、能够使用纯 TypeScript 声明 props 和自定义事件等优势;
2)不能在 setup 中使用 this 返回 vue 实例对象
3)生命周期钩子函数名称前加了 on
4)传参 props 和 事件 emit 有不同的调用方式
5)计算属性 computed 和 监听器 watch 使用方式不同
6)新增大量的响应式 api,合理地运用这些 api 操作数据,并可使页面响应数据变化。
在vue2中是使用的Options API,这种写法不方便我们的阅读和交流,逻辑过于分散。
vue2(数据和方法分开)
<script>
export default {
// 数据
data(){
return{};
},
mounted(){},
// 方法
methods:{},
computed:{}
}
</script>
vue3(数据和方法都在setup里面)
<script>
export default {
setup(){
// 数据和方法都写这里,更简洁
}
}
</script>
八、支持 typescript 开发语法
多了一种开发方式,有利于团队合作、使代码更规范和严谨;对于习惯 javascript 松散语法的开发者来说,可能不太喜欢这种开发方式
九、diff算法
vue2
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。
diff算法会比较每一个vnode,而对于一些不参与更新的元素,进行比较是有点消耗性能的。
vue3
diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags,patchFlags就是优化的标识。
只会比较patchFlags发生变化的vnode,进行更新视图,对于没有变化的元素做静态标记,在渲染的时候直接复用。
十、v-if 和 v-for的优先级
vue2
我们最好不要把v-if和v-for同时用在一个元素上,这样会带来性能的浪费(每次都要先渲染才会进行条件判断)
v-for 优先于 v-if 生效
<div v-if="index == 1" v-for="(item,index) in arr" :key="index">{{item}}</div>
vue3
v-if 优先于 v-for 生效
<div v-if="index == 1" v-for="(item,index) in arr" :key="index">{{item}}
</div>
参考: