深入浅出Vue系列--数据劫持实现原理-创新互联

一、前言

创新互联公司专业为企业提供忻城网站建设、忻城做网站、忻城网站设计、忻城网站制作等企业网站建设、网页设计与制作、忻城企业网站模板建站服务,10余年忻城做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

数据双向绑定作为 Vue 核心功能之一,其实现原理主要分为两部分:

  1. 数据劫持
  2. 发布订阅模式

本篇文章主要介绍 Vue 实现数据劫持的思路,下一篇则会介绍发布订阅模式的设计。

二、针对 Object 类型的劫持

对于 Object 类型,主要劫持其属性的读取与设置操作。在 JavaScript 中对象的属性主要由一个字符串类型的“名称”以及一个“属性描述符”组成,属性描述符包括以下选项:

  1. value: 该属性的值;
  2. writable: 仅当值为 true 时表示该属性可以被改变;
  3. get: getter (读取器);
  4. set: setter (设置器);
  5. configurable: 仅当值为 true 时,该属性可以被删除以及属性描述符可以被改变;
  6. enumerable: 仅当值为 true 时,该属性可以被枚举。

上述 setter 和 getter 方法就是供开发者自定义属性的读取与设置操作,而设置对象属性的描述符则少不了 Object.defineProperty() 方法:

function defineReactive (obj, key) {
 let val = obj[key]
 Object.defineProperty(obj, key, {
  get () {
   console.log(' === 收集依赖 === ')
   console.log(' 当前值为:' + val)
   return val
  },
  set (newValue) {
   console.log(' === 通知变更 === ')
   console.log(' 当前值为:' + newValue)
   val = newValue
  }
 })
}

const student = {
 name: 'xiaoming'
}

defineReactive(student, 'name') // 劫持 name 属性的读取和设置操作


当前题目:深入浅出Vue系列--数据劫持实现原理-创新互联
当前链接:http://myzitong.com/article/dshehj.html