Vue笔记_01双向数据绑定原理

[1]什么叫双向数据绑定？
[2]双向绑定原理
- vue2.x实现双向绑定
- - Object.defineProperty对象(es6新增)
  - - 语法
    - 举例说明
    - 踩坑 - 给某属性进行双向绑定
    - 踩坑 - 给对象的所有属性进行双向绑定
- vue2.x实现双向绑定
- vue2.x实现双向绑定缺点
vue3.x实现双向绑定
- Proxy构造函数(es6新增)
- Reflect对象
vue3.x双向绑定

[1]什么叫双向数据绑定？

视图中的数据发生了变化，data中的数据也要对应改变；
data中的数据发生了变化，视图上的数据也要对应改变；

[2]双向绑定原理

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

vue2.x实现双向绑定

在vue2.x中数据双向绑定的核心是使用 Object.defineProperty(对象，key,{get(),set()})方法来给对象的属性添加get、set方法实现的！

Object.defineProperty对象(es6新增)

语法

Object.defineProperty(obj,key,{enumerable:false , // 控制属性是否可以枚举，默认值为falsewritable:false, // 控制属性是否可以被修改，默认值为falseconfigurable:false, // 控制属性是否可以被删除，默认值为false// 当获取该属性时就会调用get方法 ，返回值为获取到的值get(){return xxx}// 当给该属性进行赋值时就会调用set方法set(val){}
})

举例说明

需求：现在有如下代码，希望person对象存在一个age属性，属性值为number变量的值且 number值与age属性值能够实时双向绑定

let number = 18
let person = {name:'chaochao',sex:'女'
}

实现：

let number = 20
let person = {name:'chaochao',sex:'女'
}
Object.defineProperty(person,'age',{get(){console.log('@@@获取age')return number},set(val){console.log('@@@修改age')number = val}
})

结果：

踩坑 - 给某属性进行双向绑定

在此示例中给data对象的name属性通过defineProperty进行读取/赋值；

let data = {name: 'chaochao'
}
Object.defineProperty(data, 'name', {get () {// [2] 若是在返回时直接通过点语法获取会再次调用get方法 -> 递归却没有递归边界---死循环return data.name},set (value) {data.name = value}
})
// [1]在此处获取了data的name属性值，就会调用name属性的get方法
data.name

改正：

let data = {name: 'chaochao'
}
let _name = data.name
Object.defineProperty(data, 'name', {get () {return _name},set (value) {data.name = value}
})
// [1]在此处获取了data的name属性值，就会调用name属性的get方法
data.name

踩坑 - 给对象的所有属性进行双向绑定

  let data = {name: 'chaochao',sex:'女',say:''
}
let _name = data.name
for(let key in data){Object.defineProperty(data, key, {get () {return data[key] // 无限调用},set (str) {data[key] = str // error: Maximum call stack size exceeded}
})
}

改正：

let data = {name:'chaochao',sex:'女',say:''
}
let _name = data.name
Object.keys(data).forEach((key) => {defineProperty(data, key, data[key])
})
function defineProperty(obj,key,val) {Object.defineProperty(obj, key, {get () {console.log('@@@get', val)return val},set (str) {console.log('@@@set', val,str)val = str}
})
}

vue2.x实现双向绑定

在通过new关键字实例化对象时，传入的配置项中添加了 data属性

const vm = new Vue({el:'#app',data:{name:'chaochao',sex:'女',say:'hello word'}})

vue会将data存在在实例化对象的_data属性中；

const data = {name:'chaochao',sex:'女',say:'hello word'
}
const vm = new Vue({el:'#app',data
})
console.log(data==vm._data) // true

将data中的数据平铺在vue实例化对象身上

使用Object.defineProperty实现数据代理。
模拟数据代理过程

// 模拟配置项data
const data = {name:'chaochao',sex:'女',say:'hello word'
}// 模拟vue实例化对象 代码中更新的是_data中的数据，视图上更改的是vue实例化对象身上的数据
const vm ={_data:data, // 存储数据...data // 数据劫持-> 更新试图
}
for(let key in vm._data){Object.defineProperty(vm._data, key , {//  当获取属性值时返回vue实例化对象身上的对应的属性的属性值get(){return vm[key]},// 当修改属性值时-> 将vue实例化对象身上对应的属性值一起修改set(val){vm[key] = val}})
}

vue2.x实现双向绑定缺点

对象：只能给对象中已经存在的属性进行双向绑定！
- 新增属性、删除属性，视图不会更新
数组：直接通过下标修改数组，视图不会更新

所以在vue2.x中有时会出现双向绑定失败(实例化对象中的数据改变了，但是视图上并没有重新渲染)的现象-可以使用 $set 解决

vue3.x实现双向绑定

在vue2.x中数据双向绑定的核心是使用new Proxy(对象，{get(),set()})方法来给对象的属性添加get、set方法实现的！

Proxy构造函数(es6新增)

语法

let data = {name:'chaochao',sex:'女',say:''
}
//data为源数据 p为代理数据
const p = new Proxy(data,{// 拦截读取属性值  ->  当读取p身上的属性时就会触发该方法，该函数return的值就是读取到的值// target:源数据； prop:key值get (target, prop) {console.log('@@@读取数据了')return target[prop] // 默认返回的是源数据的值},// 拦截设置属性值或添加新属性 -> 当修改p身上的属性的属性值或给p添加新属性时就会触发该方法set (target, prop, value) {console.log('@@@修改数据')target[prop] = value // 当修改了代理数据就去修改源数据的值},// 拦截删除属性 -> 当删除p身上的属性时就会触发该方法deleteProperty (target, prop) {console.log('@@@删除数据 ')return delete[prop] // 当删除了代理数据的属性就删除源数据的属性并返回是否删除成功}
})

Reflect对象

我们可以通过Reflect对象去增删改查对象中的属性
语法

let data = {name:'chaochao',sex:'女',say:''
}
// 新增属性
console.log(Reflect.set(data,'age', 18)) // true
// 获取属性
console.log(Reflect.get(data,'name'), Reflect.get(data,'age')) // chaochao, 18
// 修改属性
console.log(Reflect.set(data,'name','niuniu')) // true
// 删除属性
console.log(Reflect.deleteProperty(data,'sex')) // true
// 查看对象
console.log(data) // {name: 'niuniu', say: '', age: 18}

优点是容错性强！

vue3.x双向绑定

 new Proxy(data,{get (target, prop) {return Reflect.get(target,prop)},set (target, prop, value) {Reflect.set(target,prop,value)},deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)}
})

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。