vue2.x响应式原理浅析
Observe demo - 锐客网 【vue2.x响应式原理浅析】响应式 demo
function updateView(val) {
console.log('视图更新', val)
}// 重新定义数组原型
const arrayProto = Array.prototype
// 创建新对象，原型指向 arrayProto ，再扩展新的方法不会影响原型
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'sort', 'reverse', 'splice'].forEach(methodName => {
arrayMethods[methodName] = function() {
arrayProto[methodName].call(this, ...arguments)
updateView(this)
}
})// 监听对象属性
function observer(target) {
// 不是对象或数组，直接返回
if (typeof target !== 'object' || target == null) return target
if (Array.isArray(target)) {
target.__proto__ = arrayMethods
} else {
// 重新定义各个属性（for in 也可以遍历数组）
for(let key in target) {
defineReactive(target, key, target[key])
}
}
}// 监听属性的get和set
function defineReactive(target, key, val) {
// 递归监听子属性（深度监听）
observer(val)
Object.defineProperty(target, key, {
get() {
return val
},
set(newVal) {
if (newVal !== val) {
updateView(newVal)
return newVal
}
}
})
}const data = https://www.it610.com/article/{
name:'张三',
age: 20,
obj: {
address: '北京'
},
a: {
b: {
c: {
d: 'dddddddd'
}
}
},
nums: [4,6,2,7,4,8,1]
}// 监听data
observer(data)data.name = '李四'
data.age = 33
data.obj.address = '深圳'
data.a.b.c.d = 'd 改变了'data.nums.push(6)data.nums.reverse()
data.nums.sort((a, b) => a - b)
文章图片
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
- （七）谈条件
- 视频转换器哪种好用（）
- Python爬虫|Python爬虫 --- 1.4 正则表达式（re库）
- 与狗狗的相处公式
- 康德式公平倾向
- 种树郭橐驼传（文言句式+古今异义+词类活用+通假字）
- 10.两种记账方式
- 吃可爱长大的易烊千玺，一害羞就会耸肩，花式耸肩杀