vue 响应式原理1

数据驱动

数据响应式

数据改变 ==> 视图改变

当我们改变数据的时候，视图会相应的更新，不需要我们做任何的 DOM 操作。Vue 封装了很多 DOM 操作，不需要我们再像 jquery 一样去写很多关于 DOM 的操作。

双向绑定

数据改变 ==> 视图改变 视图改变 ==> 数据改变

在 vue 中可以使用 v-model 在表单上创建双向数据绑定，双向绑定包括了数据响应式

由于数据响应式和双向绑定，使得我们的开发是数据驱动的，开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图的。

vue2 的响应式核心原理

vue 官方文档有专门的一章介绍响应式原理：

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

其实 vue2 的响应原理就是 Object.defineProperty，在以前的文章中也做过介绍，基本用法如下，在设值的时候会触发 set 方法，取值的时候触发 get 方法。

// 模拟 Vue 中的 data 选项
let data = {
  msg: 'hello',
  count: 10
}
// 模拟 Vue 的实例
let vm = {}

proxyData(data)
function proxyData(data) {
  Object.keys(data).forEach(key => {
    Object.defineProperty(vm, key, {
      enumerable: true,
      configurable: true,
      get () {
        console.log('get: ', key, data[key])
        return data[key]
      },
      set (newValue) {
        console.log('set: ', key, newValue)
        data[key] = newValue
      }
    })
  })
}

// 测试
vm.msg = 'Hello World'
console.log(vm.msg)

vue3 的响应式核心原理

在 Vue 3 中则使用了 Proxy 来创建响应式对象，直接监听对象而非属性，性能比 Object.defineProperty 好。

在以前的文章中也介绍过 Proxy，基本用法如下：

// 模拟 Vue 中的 data 选项
let data = {
  msg: 'hello',
  count: 0
}

// 模拟 Vue 实例
let vm = new Proxy(data, {
  get (target, key) {
    console.log('get, key: ', key, target[key])
    return target[key]
  },
  set (target, key, newValue) {
    console.log('set, key: ', key, newValue)
    target[key] = newValue
  }
})

// 测试
vm.msg = 'Hello World'
console.log(vm.msg)