vue2与vue3的区别

131 阅读1分钟

数据双向绑定

Vue2.0使用Object.defineProperty

原理:通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作,当数据发生改变发出通知 Vue3.0使用ES6的新特性porxy 原理:通过ES6的新特性proxy来劫持数据,当数据改变时发出通知 Vue2.x版本中的双向绑定不能检测到下标的变化
proxy可以劫持整个对象,并返回一个新对象

2.0与3.0生命周期函数

2.0生命周期3.0生命周期说明
beforeCreatesetup组件创建之前
createdsetup组件创建完成
beforeMountonBeforeMount组件挂载之前
mountedonMounted组件挂载完成
beforeUpdateonBeforeUpdate数据更新,虚拟 DOM 打补丁之前
mountedonMounted组件挂载完成
beforeUpdateonBeforeUpdate数据更新,虚拟 DOM 打补丁之前
updatedonUpdated数据更新,虚拟 DOM 渲染完成
beforeDestroyonBeforeUnmount组件销毁之前
destroyedonUnmounted组件销毁后

语法

1.v-model语法糖废弃,改用 modelValue

<input v-model="value" />

<input modelValue="value" />

1.Vue2不能再使用Vue.nextTick/this.$nextTick,Vue3中你可以用

import { nextTick } from 'vue'
nextTick(() => {
  // something
})