响应式（双向数据绑定）的原理？

回答面试官版：

vue实现双向数据绑定的原理就是利用了Object.defineProperty()，这个方法重新定义了对象获取属性值get和设置属性值set的操作来实现的。

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

在vue3中使用proxy方法进行了重写。

代码分解版：

// 这是将要被劫持的对象
const data = {
  name: ""
};
function say(name) {
  if (name === "古天乐") {
    console.log("给⼤家推荐⼀款超好玩的游戏");
  } else if (name === "渣渣辉") {
    console.log("戏我演过很多,可游戏我只玩贪玩懒⽉");
  } else {
    console.log("来做我的兄弟");
  }
}
// 遍历对象,对其属性值进⾏劫持
Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log("get");
    },
    set: function(newVal) {
      // 当属性值发⽣变化时我们可以进⾏额外操作
      console.log(`⼤家好,我系${newVal}`);
      say(newVal);
    }
  });
});
data.name = "渣渣辉";
//⼤家好,我系渣渣辉
//戏我演过很多,可游戏我只玩贪玩懒⽉