Vue2 与 Vue3 的数据绑定原理及实现

Vue2 的数据绑定原理及实现

Vue2 的数据绑定原理：

Vue2 的数据绑定使用的是 Object.defineProperty，基于数据劫持来监听数据变化。（即通过 getter 和 setter 对数据的读写进行劫持实现数据监听）

Vue2 实现数据绑定的步骤：

1. 初始化：生成观察者Watcher对象，收集依赖
2. 实例对象对应的数据属性被读取时，将该实例加入对应属性的Dep（依赖）中
3. 实例对象对应的数据属性被修改时，触发该属性的Dep对象，通知对应的Watcher更新
4. Watcher监听到对应属性的变化，数据被更新，执行对应的回调函数

以下是 Vue2 实现数据绑定的示例代码：

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    // 生成 watcher 对象
    this.watcher = new Watcher(this, "count", this.update);
  },
  methods: {
    update() {
      this.$forceUpdate(); // 手动更新组件
    }
  }
};
</script>

Vue3 的数据绑定原理及实现

Vue3 的数据绑定原理：

Vue3 的数据绑定使用的是 Proxy，基于数据代理来监听数据变化。（即在获取/设置数据时进行劫持实现数据监听）

Vue3 实现数据绑定的步骤：

1. 初始化：生成render函数虚拟DOM，并通过 createGetter 和 createSetter 函数生成数据对象的 get 和 set 方法
2. 实例对象对应的数据属性被读取时，调用 createGetter 函数，返回通过h函数生成的虚拟DOM
3. 实例对象对应的数据属性被修改时，调用 createSetter 函数，设置新值并执行更新函数
4. Update 函数重新运行生成新的虚拟 DOM tree
5. 新旧 DOM tree 进行对比，只更新部分更改的内容

以下是 Vue3 实现数据绑定的示例代码：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { reactive, watchEffect } from "vue";
export default {
  setup() {
    const state = reactive({
      count: 0,
    });
    // 创建一个 watchEffect 监听器
    watchEffect(() => {
      console.log(state.count);
    });
    return {
      state,
    };
  },
};
</script>

以上就是 Vue2 与 Vue3 的数据绑定原理及实现的完整攻略。