模拟Vue.js响应式原理

数据驱动

数据响应式，双向绑定， 数据驱动

• 数据响应式：
  • 数据模型仅仅是普通的javaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率
• 双向绑定
  • 数据改变，视图改变，视图改变，数据也随之改变
  • 我们可以使用v-model在表单元素上创建双向数据绑定
• 数据驱动是vue是vue最独特的特性之一
  • 开发过程中只需要关注数据本身， 不需要关心数据是如何渲染到视图。

数据响应式核心原理 - vue2

使用 Object.defineProperty 将data里面的属性全部都赋值VM上。同时根据对象的get, set方法。来监听数据的变化。 因为是单个绑定的所以需要循环所有数据将所以属性绑定Object.defineProperty方法。该方法不兼容ie8以下

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)
            if (newValue === data[key]) return
            data[key] = newValue
            document.querySelector('#app').textContent = data[key]
          }
        })
      })
    }

数据响应式核心原理 - vue3

使用new proxy()可以监听整个对象，同时设置整个对象的get,set方法。监听整个对象的变化。与Object.defineProperty相比不需要循环。而且有浏览器支持。性能更好。IE不支持

const 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)
        if (target[key] === newValue) {
          return
        }
        target[key] = newValue
        document.querySelector('#app').textContent = target[key]
      }
    })
    vm.count = 'Hello'
    vm.msg = 'He'

发布——订阅模式

• 发布就是售货员小姐姐：当店里AJ没有，小姐姐就会问需要的话留个电话或者微信，货到了第一时间联系你。
• 小姐姐肯定不会之留了你一个人的手机号。那个本本应该记着很多很多的手机号。
• 当货到了之后小姐姐会挨个打电话。
• 你当时留下电话就相当于预定了有货就打电话。
• 就免去了隔三差五去店里去问了。因为只要有货就会收到消息。