扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一、前言
数据双向绑定作为 Vue 核心功能之一，其实现原理主要分为两部分：
本篇文章主要介绍 Vue 实现数据劫持的思路，下一篇则会介绍发布订阅模式的设计。
二、针对 Object 类型的劫持
对于 Object 类型，主要劫持其属性的读取与设置操作。在 JavaScript 中对象的属性主要由一个字符串类型的“名称”以及一个“属性描述符”组成，属性描述符包括以下选项：
上述 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 属性的读取和设置操作
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网