- let data = { //相当于vue中的data
- msg: "",
- name: '',
- age: 222,
- adress: {
- country: 'China',
- province: 'Beijing'
- }
- }
-
- let vm = {} //相当于vue实例
-
- function observe(target) {
- if (typeof target !== 'object' || target === null) { return target }
- Object.keys(target).forEach(key => {
-
- defineReactive(target, key, target[key])
- })
- }
- //把data中的所有对象都变为响应式。
-
- function defineReactive(target, key, val) {
- //通过递归的方式把嵌套对象的属性设置为响应式。
- observe(val)
- Object.defineProperty(target, key, {
- get() {
- // 在这里添加观察者对象 Dep.target 表示观察者
- console.log('触发getter')
- return val;
- },
- set(newVal) {
- //处理data中对象新增属性无法监测的问题
- observe(newVal)
- //如果值不变则直接返回
- console.log('触发setter,值为:' + newVal)
- if (val !== newVal) {
- val = newVal;
- // 触发通知 更新视图
- document.querySelector('.app').textContent = val
- }
- }
- })
- }
-
- observe(data)
- // data.age = '333'
- data.name= { num: '222' }
- data.name.num = '333'