Cream Blog

Appearance

数据驱动 ​

准备工作 ​

  • 数据驱动
  • 响应式的核心原理
  • 发布订阅模式和观察者模式

数据驱动 ​

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

vue2 Object.DefinePro ​

vue3 Proxy ​

发布订阅模式 观察者模式 ​

js
let eventHub = new Vue()

// 发布
eventHub.$emit('eventName',)
//订阅
eventHub.$on('eventName', () => {})
let eventHub = new Vue()

// 发布
eventHub.$emit('eventName',)
//订阅
eventHub.$on('eventName', () => {})

观察者模式 ​

  • 观察者模式（订阅者） --Watch
    • update(): 当时间发生时，，具体要做的事情
  • 目标(发布者) --Dep
    • subs数组：存储所有的观察者
    • addSub(): 添加观察者
    • notify(): 当事件发生，调用所有观察者的update()方法
  • 没有事件中心
js
class Vue {
    constructor ( options ) {
        //1.通过属性保存选项的数据
        this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string' ? document.querySelector
        //2.把data中的成员转换成getter和setter，注入到vue实例中

        //3.调用observer对象，监听数据的变化

        //4.调用compiler对象，解析指令和差值表达式

    }
}
class Vue {
    constructor ( options ) {
        //1.通过属性保存选项的数据
        this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string' ? document.querySelector
        //2.把data中的成员转换成getter和setter，注入到vue实例中

        //3.调用observer对象，监听数据的变化

        //4.调用compiler对象，解析指令和差值表达式

    }
}