Vue - 基础

[tomoya06]

概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的设计收到MVVM模型影响。

MVC/MVVM等软件架构简介

本文参考阮一峰的博客

MVC

组成部分：

• View视图：用户界面。
• Controller控制器：处理业务逻辑
• Model模型：数据保存

通信方式

• View 传送指令到 Controller
• Ccontroller 完成业务逻辑后，要求 Model 改变状态
• Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

交互方式

接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller；另一种是直接通过controller接受指令。但实际上还有其他灵活的方式。

MVVM

通信方式

• 与MVC相比，Controller改名为ViewModel
• View和Model之间不发生联系，都通过ViewModel传递
• View和ViewModel之间采用双向绑定(data-binding)，View的变动都自动反映在ViewModel，反之亦然
• Model和ViewModel之间双向通信

[tomoya06]

生命周期

示意图

高清图见Vue官方文档

生命周期钩子

生命周期钩子	组件状态	最佳实践	可访问变量
beforeCreate	实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据	常用于初始化非响应式变量	None
created	实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组	常用于简单的ajax请求，页面的初始化	data/computed/watch/methods
beforeMount	在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数		+ $el
mounted	实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$refs属性可以访问	常用于获取VNode信息和操作，ajax请求	+$refs
beforeupdate	响应式数据更新时调用，发生在虚拟DOM打补丁(patch)之前	适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器	更新的data
updated	虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作	避免在这个钩子函数中操作数据，可能陷入死循环	同上
beforeDestroy	实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例	常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed	实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁	–

另外，<keep-alive>元素独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数。

钩子函数输出演示

• 关键要素：$el, $ref, data
• 可读取时机：$el -> beforeMounted, $ref -> mounted, data -> created
• 更新时新数据可读取时机：beforeUpdated

父子组件的生命周期

1. 加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2. 子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated

3. 父组件更新过程 父beforeUpdate->父updated

4. 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

[tomoya06]

内部运行机制

直接看小册吧，就是这本

运作流程图

关键点

响应式原理

核心组成：

参考掘金博客总结

• observe：遍历 data 中的属性，使用 Object.defineProperty 的 get/set 方法对其进行数据劫持；
• Dep：消息订阅器。每个属性拥有自己的消息订阅器 dep实例，用于存放所有订阅了该属性的观察者对象；
• Watcher：观察者对象类，每个组件都有一个watcher实例，通过 dep 实现对响应属性的监听，监听到结果后，主动触发自己的回调进行响应。

响应化过程：

• 使用new Vue()创建vue组件时，在constructor里面调用observe(this._data)对this._data的每个属性“响应式”化
• 在observe()内部，实际上是对data的每个key、调用defineReactive()为每个key注册Dep；Dep类中有一个sub列表，用于存储所有需要监听这个key值变化的Watcher对象
• defineReactive()中继续调用Object.defineProperty()来添加getter/setter代理方法，getter/setter是依赖收集的关键，也是Vue实现MVVM的双向数据绑定的关键
• 借助getter收集依赖，把读取过这个key值的Watcher对象收集到Dep中
• 借助setter通知Dep中的所有订阅者更新

编译

• 包括三个步骤：parse, optimize, generate
• 最终生成render()
• 调用render()会得到VNode节点

VNode、Virtual DOM

• VNode实质上是一个用来描述真实DOM的JavaScript对象
• Virtual DOM 其实就是一棵以 VNode 节点作为基础的树，实际上它只是一层对真实 DOM 的抽象。
• Virtula DOM不依赖真实平台环境，可以跨平台，在不同平台使用不同的方法映射到DOM

VNode 生成真实DOM

本质上是通过原生DOM操作方式来生成DOM节点，然后插入$el中。完整流程可以参考掘金博客。关键点如下：

1. 无论VNode是什么类型的节点，只有三种类型的节点会被创建并插入到的Dom中：元素节点、注释节点、和文本节点。
2. 生成过程是递归完成的，是逐步生成子节点然后插入到父节点中的过程。

数据更新后patch

图片来自这里

• patch，更新受到数据更新影响的部分视图。关键在于使用了DIFF算法得到一个最简化更新策略
• patchVNode，新VNode与旧VNode相同时执行的比较函数，会对两边的子节点列表做DIFF比较（updateChildren），比较过程中会递归调用，实现对全VNode树的更新
• DIFF实际上是一个最简化更新新旧节点列表的算法，配合事先定义好的DOM节点操作方法来实现真实DOM的更新

nextTick、批量更新

• 数据更新会触发setter方法，对应的watcher会被推入更新队列中，对同一数据的多个watcher会被合并（直接忽略掉）
• nextTick在数据更新时会触发，本质会提交一个microtask或macrotask的callback，callback跟随js的Event Loop周期运行
• callback开始执行时就会去处理当前的所有watcher队列，也就会更新视图

[tomoya06]

疑难杂症

Vue data() 为什么是函数，而不是一个对象

data是Vue原型链上的一个属性，每个Vue组件都是一个Vue实例，通过new Vue()实例化。如果data直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变。因此Vue规定，data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。

参考这篇博客，Vue的data定义类似如下，是在原型链上绑定的：

// 创建一个简单的构建函数
var MyComponent = function() {
    // ... code here
}
// 原型链对象上设置data数据，为里为Object
MyComponent.prototype.data = {
  name: 'abc',
  age: 20,
}
// 创建两个实例:小明，小红
var xiaoming = new MyComponent()
var xiaohong = new MyComponent()
// 默认状态下小明和小红的年龄一样
console.log(xiaoming.data.age === xiaohong.data.age) // true
// 改变一下小明的年龄
xiaoming.data.age = 30;
// 打印下小红的年龄，发现因为改变了小明的年龄，结果造成小红的年龄也变了
console.log(xiaoming.data.age)// 30
console.log(xiaohong.data.age) // 30

组件通信

• 父子：props emit $parent $children
• 兄弟：$parent.$children() $refs
• 跨层级：这种情况较多的话，可以考虑上Vuex

不能检测的变化

1. 对象： Vue 无法检测 property 的添加或移除；解决：Vue.set(object, propertyName, value)
2. 数组：Vue 不能检测以下数组的变动：
   1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue；解决：Vue.set(vm.items, indexOfItem, newValue) / vm.items.splice(indexOfItem, 1, newValue)
   2. 当你修改数组的长度时，例如：vm.items.length = newLength；解决：vm.items.splice(newLength)

进一步分析：真的是因为Object.defineProperty不行吗？

参考这篇博客的测试分析，Object.defineProperty在数组中的表现和在对象中的表现是一致的，数组的索引就可以看做是对象中的 key。

• 通过索引访问或设置对应元素的值时，可以触发 getter 和 setter 方法
• 通过 push 或 unshift 会增加索引，对于新增加的属性，需要再手动初始化才能被 observe。
• 通过 pop 或 shift 删除元素，会删除并更新索引，也会触发 setter 和 getter 方法。

所以，Object.defineProperty 是有监控数组下标变化的能力的，只是vue2.x放弃了这个特性。在2.x中vue重新hack了数组的内置方法，包括push / pop / shift / unshift / splice / sort / reverse。

Object.defineProperty vs Proxy

Vue3.x将改用Proxy来实现响应化。用法参考MDN文档。与 Object.defineProperty 相比，proxy的好处如下：

1. Object.defineProperty只能劫持对象的属性，而Proxy是直接代理对象
2. proxy可以监听到新增的属性，包括数组
3. proxy支持更多拦截操作，除了get/set之外还有delete/has等共13种

但缺点在于兼容性差。

watch & computed

Vue组件中支持的另外两个API。用于实现侦听器和计算属性。

特性比较

watch：

• 监听已经存在且已挂载到 vm 上的数据，可以监听computed属性；
• 当数据发生变化便会立即调用执行函数；
• 可以执行异步操作或高消耗性能的操作

computed：

• 计算一个新的属性，并将该属性挂载到 vm 上；
• 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后、第一次访问 computed 属性，才会计算新的值

实现原理

本段参考掘金博客

watch

给要监听属性的Dep中注册一个watcher，该watcher的cb就是watch定义的handler。当属性更新时，按照一般的响应式流程触发watcher执行。

computed

1. computed属性本身也会建立一套相应系统，也就是有自己的Dep，与vm.data的Dep类似，也用来触发computed属性的监听者的更新，比如用到computed属性的视图。
2. computed属性一般通过data的属性值计算而得。在计算过程中也就调用到了data属性的get方法，从而computed本身就成为了这些data属性的watcher，被添加到这些data属性的dep中。
3. 依赖的data属性更新时，触发computed属性更新。computed属性内部会有一份缓存值，记录当前本属性的最新结果；但data更新的时候并不会立刻去更新缓存值，而是用另一个标志位来说明缓存值有更新，当computed自己的watcher来读取自己的值时，才会去计算并更新缓存值，并更新标志位，直到下次更新前都直接从缓存值读取。
4. computed被触发更新时，也会出发自己的watcher来更新，例如页面更新，这时就会调用computed的getter，从而触发计算新值或者读取缓存

v-if & v-show & v-html

• v-if：会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
• v-show：会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改CSS属性display:none来隐藏元素；
• v-html：先移除节点下的所有节点，设置innerHTML为v-html的值

[tomoya06]

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

数据流

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

组成部分

注册了Vuex的组件可以通过this.$store来进行vuex的相关操作

• state：存储状态（单一状态树）。也就是包含变量的那个对象（vue中需要共享的数据）
• getters：派生状态。也就是set、get中的get
• mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。
• actions：和mutations类似。支持异步操作，通过提交mutation来改变state。
• modules：store的子模块，内容就相当于是store的一个实例。

经过测试，在mutation中使用setTimeout异步更新state也是可以的，action中不借助mutation、而是直接更新state也可以。参考尤雨溪的知乎回答，Vuex文档中对mutation和action的操作限制更多的是建议而非强制规定，目的是为了能更好地调试，例如在devTools中做state回滚的操作。以测试为例，如果在action中直接修改state，devTools中是不记录这次修改记录的；mutation中的异步更新，devTools添加的记录也有延迟。

实现原理

• 通过Vue.use(Vuex)安装插件，内部调用install方法，install方法使用Vue.mixin方法在beforeCreate中注入vuexInit方法
• vuexInit方法会给每一个vm添加this.$store，这样每级节点都能访问到统一的store了
• store的响应式实现实际上也是直接用的Vue内部的实现，store._vm = new Vue()，然后通过设置getter来创建代理，可以通过this.store[key]来访问store._vm[key]的值

更新操作

• 需要通过commit mutation来提交数据更新
• 业务逻辑可以放在action中，dispatch action来提交多个mutation
• Store在根组件以store属性注入后，所有子组件均可访问

Flux

参考阮一峰的博客

Vuex的实现参考了Flux、Redux等状态管理的基本思想。下图是Flux的数据流。

组成部分

• View： 视图层
• Action（动作）：视图层发出的消息（比如mouseClick）
• Dispatcher（派发器）：用来接收Actions、执行回调函数
• Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

更新操作

Flux 的最大特点，就是数据的"单向流动"。

• 用户访问 View
• View 发出用户的 Action
• Dispatcher 收到 Action，要求 Store 进行相应的更新
• Store 更新后，发出一个"change"事件
• View 收到"change"事件后，更新页面