Nothing is unachievable

引入

说起 指令Directive 用的最多还是 v-model, v-show, v-if, v-else 这些内置的, 当然还有我们平时自定义的

还记得之前分析渲染流程中, 基本都有着 这么一行 dirs && invokeDirectiveHook(vnode, null, parentComponent, hookName) 代码

即调用 指令 中的生命周期钩子, 下面我们来看看

引入

任务的调度决定了组件 update 的 顺序, 决定了我们通过 watchOptions 配置, 执行 cb 的时机, 解决了例如 echarts 为啥需要 nextTick 才能 渲染 出来结果

由此可见, 任务的调度 是很重要的(ps: hhhh)

scheduler

1. 我们需要一个全局的容器来保存我们的任务队列
2. 一次执行中, 我们需要保证只有一个promise
3. 执行中需要根据 id 来排序执行
4. 执行完我们需要重置状态

引入

vue2.x 的响应式 是通过 Watcher, Observer, Dep 来实现的 即 观察者模式-发布订阅模式

Observer 通过 Object.defineProperty 来劫持对象的 key Dep 即依赖, 主要做两件事, get 时 收集依赖, set 时通知 Watcher Watcher 接收到通知 调用自己的 update 去 触发 render(不一定都是render, 只是举个例子)

引入

首先我先说明 这里的 属性, 你可以理解为 h 方法的 第二个参数 props, 这个的范围其实是比我们在组件中使用的 props: ["change"] 的范围更大, 因为还包含了 我们传入的 class, style, id 之类的 HTML元素的属性

直接在 组件里面写属性的 其实 不光 props, 还有 emit, 还有 directive, 这里我主要讲下 props

引入

就我来说, 挂载和更新其实就是一个方法, 只是通过参数来控制是去 mount or update

因为 vue 是 组件级更新, 什么是 组件级更新 就是 每次更新都是 以组件 为单位去更新

这里的 mount 可以分为 app 和 component

这里的 update 也可以分为app 和 component, 但是 app 的 更新只有 unmount

Prxoy 与 Reflect

什么是 Proxy ? 简单来说, 就是使用 Proxy 可以创建一个代理对象, 它能够实现对其他对象的代理, 也就是说 Proxy 只能代理对象, 所以对于字符串, 数字, 布尔值等, 无法代理. 那么代理 是什么? 所谓代理, 指的是对一个对象的基本语义的代理, 允许我们拦截并重新定义对一个对象的基本操作

应用配置项

config 是一个包含 Vue 应用程序全局配置的对象。可以在挂载应用程序之前修改下面列出的属性。

• devtools 类型： boolean 默认值： true 如何使用：

app.config.devtools = true;
// 是否开启 vue-devtools 工具的检测，默认情况下开发环境是 true，生产环境下则为 false。