8.1.3 模拟Vue.js响应式原理

本文为拉勾网大前端高薪训练营第一期笔记

---

8.1.3 模拟 Vue.js 响应式原理

Vue数据驱动

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

Vue2.x数据响应式实现原理是Object.defineProperty，数据劫持set get

Vue3的原理是Proxy

Vue的自定义事件基于观察者模式

发布订阅模式结构分为发布中心 发布者 订阅者

观察者模式没有发布中心

发布订阅模式隔离了发布者和订阅者，减少发布者和订阅者的依赖关系，会变得更灵活

nodeType如果是3的话代表是文本节点

node.textContent获取node的文本

node.attributes获取属性v-text

实现mini Vue

Vue.js

class Vue {
  constructor (options) {
    // 1. 通过属性保存选项的数据
    this.$options = options || {}
    this.$data = options.data || {}
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el