准备工作

• 数据驱动
• 响应式的核心原理

• 发布订阅模式和观察者模式

  数据驱动

• 数据响应式、双向绑定、数据驱动

• 数据响应式
  • 数据模型仅仅是普通的JavaScript对象的，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率
• 双向绑定
  • 数据改变，视图改变；视图改变，数据也随之改变
  • 我们可以使用v-model在表单元素上创建双向绑定数据

• 数据驱动是Vue最独特的特性之一

  • 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

    响应式原理

• vue2.x ```javascript // 模拟 Vue 中的 data 选项 let data = { msg: ‘hello’, count: 10 }

// 模拟 Vue 的实例 let vm = {}

proxyData(data)

function proxyData(data) { // 遍历 data 对象的所有属性 Object.keys(data).forEach(key => { // 把 data 中的属性，转换成 vm 的 setter/setter 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) if (newValue === data[key]) { return } data[key] = newValue // 数据更改，更新 DOM 的值 document.querySelector(‘#app’).textContent = data[key] } }) }) }

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

- vue3.x
```javascript
// 模拟 Vue 中的 data 选项
let data = {
  msg: 'hello',
  count: 0
}
// 模拟 Vue 实例
let vm = new Proxy(data, {
  // 执行代理行为的函数
  // 当访问 vm 的成员会执行
  get (target, key) {
    console.log('get, key: ', key, target[key])
    return target[key]
  },
  // 当设置 vm 的成员会执行
  set (target, key, newValue) {
    console.log('set, key: ', key, newValue)
    if (target[key] === newValue) {
      return
    }
    target[key] = newValue
    document.querySelector('#app').textContent = target[key]
  }
})
// 测试
vm.msg = 'Hello World'
console.log(vm.msg)