4 - Vue / Vuex

[Linjiayu6]

Vue.js

Vue 和 React 本质的不同
数据劫持方式, 数据变更触发渲染流程

[Vue] 1 - Vue MVVM? React只是个View?

[Vue] 2 - 生命周期 / 组件通信 / computed vs watch

[Vue] 3 - 对象的数据劫持? / 双向绑定实现 / Vue响应式原理?

[Vue] 4 - Vue 和 React 不同

[Linjiayu6]

Vue 事件 api

$on $once $off $emit
其实就是Eventbus发布订阅者模式, 自定义事件的触发
- $on 注册 可多次
- $once 注册一次
- $off 删除该注册
- $emit 触发执行

[Linjiayu6]

Vue 响应式原理

核心: Object.defineProperty, 遍历对象的每个props都注册该方法

Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })

检测数据变化: 给对象的属性增加 setter 和 getter 方法, 修改值会触发 setter, 取值会触发 getter.

getter 收集依赖 订阅者模式: 核心是一个Dep类, 用来收集watcher, 当调用notify 再触发执行

class Dep {
    constructor () {
        this.subs = [];
    }
    addSub (sub: Watcher) {
        this.subs.push(sub)
    }
    removeSub (sub: Watcher) {
        remove(this.subs, sub)
    }
    notify () {
        // stabilize the subscriber list first
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
            subs[i].update()
        }
    }
}

Watcher: 具体的那个订阅者, 就是那个组件节点 setter 派发更新: 触发this.subs 队列, 执行notify 方法执行。