vue自我整理

vue理解整理

基本概念

Vue是一台用于构建用户界面的渐进式MVVM框架。（渐进式：强制主张最少）。

Vue.js包括了生命是渲染、组件化系统、客户端路由、大规模状态管理、构建工具、数据持久化平台支持等；但在实际开发中，并没有强制要求开发者之后某一特定功能，而是根据需求逐渐扩展。

Vue.js的核心库只关心视图渲染，且由于渐进式的特性，Vue.js便于与第三方库或既有项目整合。

组件机制

组件就是对一个功能和样式进行独立的封装，让HTML元素得到扩展，从而使得代码得到复用，使得开发灵活，更加高效。

与HTML元素一样，Vue.js的组件拥有外部传入的属性prop和事件，除此之外，组件还拥有自己的状态（data）和通过数据和状态计算出来的计算属性（computed），各个维度组合起来决定组件最终呈现的样子和交互的逻辑。

数据传递

所有组件之间的作用域是孤立的，因此组件间的数据共用方式是传递而不是引用。Vue中，使用prop传递数据，组件内部需要显性的声明该字段。

事件机制

Vue内部实现了一个事件总线系统，即EventBus。在Vue中可以使用EventBus来作为够用桥梁的概念，每个Vue的组件实例都继承了EventBus，都可以接受$on和发送事件$emit。

父组件向子组件传递了xxx事件，在子组件实例化的时候，子组件将xxx事件使用$on函数注册到组件内部，需要出发事件是调用this.$emit来触发事件。

除了父子组件之间的事件传递，还可以使用一个Vue实例为多层级的父子组件建立数据通信的桥梁，如下：

const eventBus = new Vue();
// 父组件中使用$on监听事件
eventBus.$on('eventName', val => {
  // ...do something
});

// 子组件使用$emit触发事件

eventBus.$emit('eventName', 'this is a message.');

除了$on和$emit以外，事件总线系统还提供了另外两个方法，$once和$off，所有事件如下：

• $on：监听、注册事件；

• $emit：触发事件；

• $once：注册事件，仅允许该时间触发一次，触发结束后立即移除事件；

• $off：移除事件。

内容分发

vue实现了一套遵循Web Components 规范草案的内容分发系统，即将元素最为承载分发内容的出口。

插槽slot，也是组件的一块HTML模板，这一块模板显示不显示，以及怎样显示有父组件来决定。实际上，一个slot最核心的两个问题就在这里出现了，是显示不显示和怎样显示。

插槽又分默认插槽、具名插槽。

默认插槽

又名单个插槽、匿名插槽，与具名插槽相对，这类插槽没有具体名字，一个组件只能有一个该类插槽。

具名插槽

匿名插槽没有name属性，所以叫匿名插槽。那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置，只需要使用不同的name属性区分即可。slot标签会根据父容器给子容器标签内传入内容的slot属性值，替换对应内容。

其实，默认插槽也有name属性值，为default，同样指定slot的name值为default，一样可以显示父组件中传入的没有指定slot的内容。

作用域插槽

作用域插槽可以是默认插槽也可以是具名插槽，不一样的地方是，作用域插槽可以分为slot标签绑定数据，让其父组件可以通过 slot-scope 获取到子组件的数据（最明显的例子element UI 的table大量使用了作用域插槽）。

slot实现原理：当子组件vm实例化时，获取到付组件传入的slot标签的内容，存放在vm.$slot中，默认插槽为vm.$slot.default，具名插槽为vm.$slot.xxx，xxx为插槽名，当组件执行渲染函数的时候，遇到<slot>标签，使用$slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则该插槽为作用域插槽。

至此，父子组件的关系如下图：

模板渲染

Vue.js的核心是声明式渲染，与命令渲染不同，声明式渲染只需要告诉程序，我们想要的什么效果，其他的事情让程序自己去做。而命令式渲染，需要命令程序一步一步根据命令执行渲染。如下例子区分：

let arr = [ 1, 2, 3, 4, 5 ];
// 命令式渲染，关心每一步，关心流程，用命令去实现
let newArr = [];
for (leti = 0; i < arr.length; i++) {
  newArr.push(arr[i] * 2);
}

// 声明式渲染，不用关心中间流程，只需要关心结果和实现的条件
let newArr1 = arr.map(item => {
  return item * 2;
});

Vue.js实现了if、for、事件、数据绑定等指令，允许采用简洁的模板语法来声明式地将数据渲染出视图。

模板编译

为什么要进行模板编译？实际上，我们组件中的template语法是无法被浏览器解析的，因为它不是正确的HTML语法，而模板编译，就是将组建的template编译成可执行的JavaScript代码，即将template转化为真正的渲染函数。

模板编译分为三个阶段，parse、optimize、generate，最终生成reader函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iD1CXQFY-1606803222949)(/Users/marie/Documents/knowledge/我的doc/img/模板编译.png)]

parse阶段：使用正则表达式将template进行字符号解析，得到指令、class，style等数据，生成抽象语法树AST。

optimize阶段：寻找AST中的景泰街店进行标记，为后面VNode的patch过程中对比做优化。被标记为static的节点在后面的diff算法中会被直接忽略，不做详细的比较。

generate阶段：根据AST结构拼接生成render函数的字符串。

预编译

对于Vue组件来说，模板编译只会在组件实例化的时候编译一次，生成渲染函数之后再也不会进行编译。因此，编译对组件的runtime是一种性能损耗。而模板编译的目的仅仅是将template转化为reader function，而这个过程刚好可以在项目构建的过程中完成。

比如，webpack的vue-loader依赖了vue-template-compiler模块，在webpack构建过程中，将template预编译成render函数，在runtime可直接跳过模板编译过程。

回过头看，runtime需要的仅仅是reader函数，而我们有了预编译之后，我们只需要保证构建过程中生成reader函数就可以。与React类似，再添加JSX的语法糖编辑器babel-plugin-transform-vue-jsx之后，我们可以在Vue组件中使用JSX语法直接书写reader函数。

<script>
  exprot default {
		data () {
      return{
        msg: 'Hello JSX'
      };
    },
    render () {
      const msg = this.msg;
      return <div>{{ msg }}</div>
    }
}
  </script>

如上面的组件，使用JSX之后，可以在JS代码中直接使用html标签，而且声明了reader函数以后，我们不再需要声明template。当然，加入我们同时声明了template和render函数，构建过程中template编译的结果将覆盖原有的render函数，即template的优先级高于直接书写的render函数。

相对于template而言，JSX具有更高的灵活性，面对一些复杂的组件，JSX有着天然的优势，而template虽然显得有些呆滞，但是代码结构上更符合视图与逻辑分离的习惯，更简单、更直观、更好维护。

需要注意的是，最后生成的render函数是被包裹在with语法中运行的。

小结

Vue组件通过prop进行数据传递，并实现了数据总线系统EventBus,组件集成了EventBut进行事件注册监听，事件触发，使用slot进行内容分发。

除此之外，实现了一套声明式模板系统，在runtime或者预编译时对模板进行编译，生成渲染函数，供组件渲染视图使用。

响应式系统

Vue.js是一款MVVM的JS框架，当对数据模型data进行修改时，视图会自动得到更新，即框架帮我们完成了更新DOM的操作，而不需要我们手动的操作DOM。可以这么理解，当我们对数据进行赋值的时候，Vue告诉了所有依赖改数据模型的组件，你一来的数据有更新，你需要进行重渲染了，这个时候，组件就会被重渲染，完成了视图的更新。

数据模型&&计算属性&&监听器

在组件中可以为每个组件定义数据模型data、计算属性computed、监听器watch。

数据模型：Vue实例在创建过程中，将数据模型data的每一个属性加入到响应式系统中，当数据被更改时，视图将得到相应，同步更新。data必须采用函数的方式return，不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后的数据变量只在当前组件生效，不会影响其他组件。

计算属性：computed基于组件响应式依赖进行计算得到结果并缓存起来。只在相关响应式依赖发生改变是他们才会重新求值，也就是说，只有它依赖的响应式数据（data、prop、computed本身）发生了变化才会重新计算。那么什么时候应该使用计算属性呢？模板内的表达式非常便利，但是设计他们的初中适用于简单运算的，在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性。

监听器：监听器watch人如其名，他可以监听响应式数据的变化，响应式数据包括data、prop、computed，当响应式数据发生变化时，它可以做出相应的处理，当需要在数据有变化时执行异步或开销较大的操作时，这个方法时最有用的。

响应式原理

在Vue中，数据模型下的所有属性，会被Vue使用Object。defineProperty（Vue3.0使用Proxy）进行数据劫持代理。响应式的核心机制是观察者模式，数据是被观察的一放，一旦发生变化，通知所有观察者，这样观察者做出响应，比如当观察者为视图时，视图可以做出视图的更新。

Vue.js的响应式系统以来三个重要的概念，Observer、Dep、Watcher。

发布者-Observer

Observer扮演的角色是发布者，他的主要作用是在组件vm初始化的时候，调用defineReactive函数，使用Object.defineProperty方法对对象的每一个子属性进行数据劫持/监听，即为每个属性添加getter和setter,将对应的属性值变成响应式。

在组件初始化时，调用initState函数，内部之星initState、initProps、initComputed方法，分别对data、prop、computed进行初始化，让其变成响应式。

初始化props时，对所有props进行遍历，调用defineReactive函数，将每个prop属性值变成响应式，然后将其挂在到_props中，然后通过代理，把vm.xxx代理到vm._props.xxx中。

同理，初始化data时，与props相同，对所有data进行遍历调用defineReactive函数，将每个data属性变成响应式，然后将其挂在到_data中，然后通过改立，把vm.xxx代理带vm._data.xxx中。

初始化computed，首先创建一个观察者对象computed-watcher，然后遍历computed的每一个属性，对每一个属性值调用defineComputed方法，使用Object.defineProperty将其变成响应式的同时，将其代理到组件实例上，即可通过vm.xxx访问到xxx计算属性。

调度中心/订阅器-Dep

Dep扮演的角色是调度中心/订阅器，在调用defineReactive将属性值变成响应式的过程中，也为每个属性值实例化了一个Dep，主要作用是对观察者（Watch）进行管理，收集观察者和通知观察者目标更新，即当属性值数据发生改变时，会遍历观察者列表(dep.subs),通知所有的watcher，让订阅者执行自己的update逻辑。

未完待续。。。。。。。