• vue2和vue3的区别


    1.vue2vue3响应式原理不同
    2.vue3支持碎片,vue不支持
    3.vue3是组合式API,vue2是选项式API
    4.v-if和v-for的优先级不同
    5.生命周期不同
    6.diff算法不同
    7.vue3新增Teleport传送门组件、

    1,vue2 vue3 响应式原理不同
    vue2 的双向数据绑定是利用 ES5 的一个 APIObject.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的
    vue3 利用 Proxy 实现数据挟持,创建一个对象的代理,实现基本操作的拦截和自定义。
    Object.defineProperty()存在的问题
    在对一些属性进行操作时,使用这种方法无法拦截,比如通过下标方式修改数组数据或者给对象新增属性,这都不能触发组件的重新渲染,因为 Object.defineProperty 不能拦截到这些操作。更精确的来说,对于数组而言,大部分操作都是拦截不到的,只是 Vue 内部通过重写函数的方式解决了这个问题
    2,vue3 支持碎片,vue 不支持
    vue3 中组件的 template 下可以包含多个根节点, vue2 中组件的 template 下只能包含一个根节点
    3,vue2 是选项式 API,vue3 是组合式 API
    vue2 选项式 api 在代码里分割了不同得属性:data,methods,computed 等,同一块业务逻辑会把数据和方法拆分到不同的代码块中,开发式需要不断上下滚动代码,开发很不方便。
    vue3 组合式 api 能让相同的业务的数据方法写在同一块代码区域,这样代码会更加简便和整洁
    4,v-if 和 v-for 的优先级不同
    vue2 v-for 优先于 v-if 生效
    vue3 v-if 优先于 v-for 生效

    5,生命周期的不同
    vue2 -------> vue3

    beforeCreate --------> setup(()=>{})
    created --------> setup(()=>{})
    beforeMount --------> onBeforeMount(()=>{})
    mounted --------> onMounted(()=>{})
    beforeUpdate --------> onBeforeUpdate(()=>{})
    updated --------> onUpdated(()=>{})
    beforeDestroy --------> onBeforeUnmount(()=>{})
    destroyed --------> onUnmounted(()=>{})
    activated --------> onActivated(()=>{})
    deactivated --------> onDeactivated(()=>{})
    errorCaptured --------> onErrorCaptured(()=>{})
    6,diff算法不同
    vue2 diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。vue2 diff算法会比较每一个vnode,而对于一些不参与更新的元素,进行比较是有点消耗性能的。
    vue3 diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags,patchFlags就是优化的标识。只会比较patchFlags发生变化的vnode,进行更新视图,对于没有变化的元素做静态标记,在渲染的时候直接复用。

  • 相关阅读:
    2022 IDEA (学生邮箱认证)安装使用教程以及基础配置教程
    Spring Security oauth2.0 客户端
    22/6/29
    C++从零开始的打怪升级之路(day44)
    goland 旧版本使用1.19环境
    c++——初阶模板
    Java线程常见方法
    数据分析常用专业术语缩写及其含义
    选择器知识点詳解
    空天地一体化无线光通信网络关键技术及其发展趋势
  • 原文地址:https://blog.csdn.net/weixin_45022949/article/details/130863735