前端面试题 Vue2.0双向绑定面试简述(异常简陋,还没想好怎么写)

本文简述的是基于 Vue2.0 的双向绑定理解,不适用于 Vue3.0

现在不太清醒,没构思好怎么写,先简单写出面试能用的,以后再深入写

面试简述

        双向绑定是一种 Vue2.0 非常优势的数据响应化的方式

        一,首先就是在Vue初始化的时候依靠 observer 对 data 中的每一项数据添加    setter(更新) 和 getter(访问) 方法

        二,这样就可以通过 Object.defineProperty  对每个属性的  setter(更新)   和  getter(访问)  属性进行  数据劫持 并且监听是否触发了更新和访问的操作

        三,当数据更新的时候触发监听回调,通知  Dep  然后使该数据的每一个  Watcher 订阅者 调动其中定义的 update 方法触发更新每一个订阅者对应在视图中渲染的数据

Object.defineProperty()的简单实现方法,可以以此进行 setter 和 getter 的监听

<script>
let obj = {}
let text = '这里是getter的拦截'
Object.defineProperty(obj, 'hahaha',
  {
    get: function (val) { // val就代表当前的 '键'所对应的'值'
      console.log('我被访问了:' + val); // 打印于 11 行,但是初始化的时候先进行了 打印,后进行了return,所以此时val还没有值
      return text   // 这里的return 值就是 hahaha 这个'键'所对应的'值'
    },

    set: function (newVal) { // newVal 就是最新设置的 值
      console.log('我被设置了:' + newVal);// 打印于 16 行
    }
  }
)
console.log(obj.hahaha); // 打印于 20 行
obj.hahaha = '现在重新设置 hahaha 的值'
</script>