数据双向绑定
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生命周期 | 说明 |
|---|---|---|
| beforeCreate | setup | 组件创建之前 |
| created | setup | 组件创建完成 |
| beforeMount | onBeforeMount | 组件挂载之前 |
| mounted | onMounted | 组件挂载完成 |
| beforeUpdate | onBeforeUpdate | 数据更新,虚拟 DOM 打补丁之前 |
| mounted | onMounted | 组件挂载完成 |
| beforeUpdate | onBeforeUpdate | 数据更新,虚拟 DOM 打补丁之前 |
| updated | onUpdated | 数据更新,虚拟 DOM 渲染完成 |
| beforeDestroy | onBeforeUnmount | 组件销毁之前 |
| destroyed | onUnmounted | 组件销毁后 |
语法
1.v-model语法糖废弃,改用 modelValue
<input v-model="value" />
<input modelValue="value" />
1.Vue2不能再使用Vue.nextTick/this.$nextTick,Vue3中你可以用
import { nextTick } from 'vue'
nextTick(() => {
// something
})