vue2和vue3数据双向绑定原理发生改变
vue2:vue2的数据双向绑定Q 原理使用的是es5的数据劫持obiect.defineProperty配合发布订阅模式来实现
优点:兼容性相对好
vue3 :通过proxy的api (Reflect) 实现
优点: 可以直接监听对象而非属性,可以直接监听数组的变化,有多达 13 种兰截方法,不限于apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的:
vue3支持碎片化 (Fragment)
组件中有多个根节点
优点: 减少标签层级,减少内存占用
vue2和vue3选用api不同 (v2和v3最大的不同点)
vue2: 采用选项式 API(Options API),在 vue2x 项目中使用的就是 选项API 写法
代码风格: date选项写数据,methods选项写函数,一个功能逻辑的代码分散
优点: 易于学习和使用,写代码的位置已经约走好了
缺点: 代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读虽然提供了 mixins (混入) 用来封装逻辑,但是出现数据函数覆盖的概率很大,不好维护
vue3: 组合式 API(Composition API)
在 vue3 中使用的就是 组合API 写法
代码风格: 一个功能逻辑的代码组织在一起,包括据,函数、
优点: 功能逻辑复杂繁多情况下,各个功能逻辑代码组织再一起,便于阅读和维护
缺点: 需要有良好的代码组织能力和拆分逻辑能力vue3支持选项式api和组合式api
建立数据的方式
vue2:数据放在data中
vue3:需要使用setup方法,使用该方法需要引入
生命周期函数不同
去掉了vue2.0中的 beforeCreate 和 created 两个阶段,同样的新增了一个 setup
beforeMount 挂载之前 改名 onBeforeMount,mounted 挂载之后 改名 onMounted
beforeUpdate 数据更新之前 改名 onBeforeUpdate,updated 数据更新之后 改名 onUpdated
beforeDestroy 销毁前 改名 onBeforeUnmount,可在此进行清除定时器,进行事件监听,发布订阅。
destoryed 销毁后 改名 onUnmounted,errorCaptured 报错 改名 onErrorCaptured
父子传参方式不同
vue2:父传子: props,子传父: $emit
vue3: setup(函数特性,vue3还给我们提供了provide和inject,我们可以在父组件中通过provide暴露属性或方法,子组件通过iniect接受,并且只要是父组件的后代,都可以通过iniect接收到父组件暴露的值