Vue进阶及原理

一、数据绑定原理

Object.defineProperty()方法

1. 参数1：操作的对象
2. 参数2：操作对象的名称
3. 参数3：对属性描述的对象

var obj = {
   name: 'zs', age: '18'}
Object.defineProperty(obj, gender, {
   
  value: '男'，
  writable: false //默认false 不可写
  enumerable: false //默认false不可枚举（遍历）
  configurable: false //默认false 以后不可重新定义配置项
})
console.log(obj) //{name: 'zs', age: '18',gender:'男'}
obj.name='a', obj.gender='b'  //{name: 'a', age: '18',gender:'男'} 无法修改defineProperty增加的属性
  for(var i in obj) {
   
  console.log(k,obj[k])} // {name: 'zs', age: '18'} 无法遍历到defineProperty增加的属性

可以设置get和set方法，分别在获取和赋值时触发。设置set()方法时需要将值存到外部变量中赋值，否则无限递归，set和get方法不可以和value、writable属性同时使用

var obj = {
   name: 'zs', age: '18'}
var genderValue='男'
Object.defineProperty(obj, 'gender', {
   
  get(){
   
  return genderValue //获取值时触发,可添加其他操作
},
  set(newValue){
   
  genderValue = newValue //设置值时触发，不可写成 gender = newValue导致递归死循环，将新值赋给第三方调用时调用第三方数据
}
})
Obj.genderValue = 'a' // 触发set方法
obj.gender            //触发get 方法

Object.defineProperty只能监听对象单个属性的获取与设置（数据劫持）

vue2 响应式原理

通过Object.defineProperty()实现，设置data后遍历所有的属性，转换为getter和setter，从而在数据变化时进行视图的更新等操作。通过数据劫持的方式将data属性设置为getter、setter。绑定视图通过虚拟DOM实现

<!--模拟响应式原理->
<div id="app">原始内容</div>