frontend

Vue.js双向数据绑定探究

在最近的前端面试中，vue.js的双向数据绑定基本是我必问的。下面我们就一起探究下其原理。

  1. 原理
    Vue.js双向数据绑定的原理主要是通过 Object对象的defineProperty方法，重写data的set和get函数 来实现的。
    以下是defineProperty()的语法
    1
    Object.defineProperty(obj, prop, descriptor)
    这个方法的三个参数分别是：
  • obj
    要在其上定义属性的对象。
  • prop
    要定义或修改的属性的名称。
  • descriptor
    将被定义或修改的属性描述符。

方法相关的就不在这里讨论，详见：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty