vue响应式原理

vue2是基于es5里面.defineProperty实现

vue3是基于es6里面proxy实现

vue2.x 的响应式原理

Object.defineProperty中常用四个属性:

value //值设置

writable, //是否可写

enumerable, //是否可遍历

consigurable // 是否可进行后续配置

var newName = 'a'
Object.defineProperty(obj,'name',{
  get() {
  console.log('访问name属性显示')
  return newName
  }
  set(newValue){
  console.log('自定义设置属性值')
  newname = newValue
  }
})

get方法：用户在访问obj对象当前name属性时，会自动调用get方法

set方法：可以设置属性值，用户在自定义设置当前属性时需要先用其他变量存储防止循环递归导致报错

<div id ="#app">初始化状态</div>

<script>
let data = {name:'a'}
let vm = {}
//通过数据劫持方式，将data属性设置为getter/setter
Object.defineProperty(vm,'name',{
enumerable:true,
consigurable:true,
  get() {
  console.log('访问name属性显示')
  return data.name
  }
  set(newValue){
  console.log('自定义设置属性值')
  data.name = newValue  //此步骤更新数据，下面可以对视图进行操作
  document.querySelector("#app").textContent = data.name //此步骤更新视图
  }
})
</script>

数据劫持：在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果（简而言之，就是触发函数的时候动一些手脚做点我们自己想做的事情）

以上简单模拟了一下vue实例，通过用户在更新数据的时候,将data中的数据同步更新，并将数据通过dom反馈到视图从而实现了vue2.x实现响应式原理最基本的操作

当然以上只是最简单的实例，只为了方便理解，后续还有如多个属性问题，数组问题等

vue2.x 响应式原理 (通俗易懂)

vue响应式原理

vue2.x 的响应式原理