VUE

一、MVVM

model - view -viewmodel

二、computed 和 watch

computed称为计算属性，watch是监听。
相同点：

1.基于vue的依赖收集机制
2.都是被依赖的变化触发，改变值，进行处理运算不同点：

	`computed`	`watch`
入和出	多入单出多个值变化，组成一个值的变化	单入多出单个值的变化，进而影响一系列的状态
性能	性能更`优` 自动`diff`依赖，若依赖没有变化，会从`缓存`中读取当前计算值	无论监听值变化与否，都会执行回调
返回值	一定要有`return`	不一定
运行	首次生成就开始赋值，进行运算	首次不会执行
执行顺序	先执行`computed`，但如果（`immediate:true`）则先执行watch，正常的watch，则是`mounted`周期后触发data changes的周期执行

三、生命周期

1.几个阶段

beforeCreate：在 new 一个 vue 实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。
created：data 和 methods 都已经被初始化好了。（如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作）
beforeMount：在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。
mounted：Vue 实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。（如果我们想要通过插件操作页面上的 DOM 节点，最早可以在和这个阶段中进行）
beforeUpdate：页面中的显示的数据还是旧的，data 中的数据是更新后的，页面还没有和最新的数据保持同步。
updated：页面显示的数据和 data 中的数据已经保持同步了，都是最新的。
beforeDestroy：Vue 实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁。
destroyed：这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了

四、v-if 和 v-show

1.基本概念

v-if 无dom，当v-if为false时，不会渲染实际节点及其子节点
v-show 存在节点，实际上是控制显隐

2.v-show 会引发 `重排`吗？

会。v-show本质是通过元素css的display属性来控制是否显示，会改变节点的大小和渲染树的布局，导致发生重排，因此v-show指令算是重排。

拓展：重绘和重排？

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，使得部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素，并将其安放在界面中的正确位置，这个过程叫做重排。
由于节点的样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变，但没有改变布局。
重排也必然会触发重绘
display 改变会引发重排，visibility：hidden 会引发重绘

拓展：display为false的元素是怎么渲染的？当一个DOM节点的display为false时候，在DOM渲染时仍然会先渲染元素，然后才会进行判断是否显示（通过display属性）。

3.v-if和v-show 的优先级

v-if是惰性的，意味当一个元素一开始的v-if 为 false的时候，就不渲染，只有当v-if第一次为true的时候才会开始渲染。而v-show相当于控制 display属性，所以v-show无论为true 或者 false 都会渲染，只是再去控制是否显示。

4.v-if 和 v-for的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐同时使用v-if 和 v-for。

5.key的作用

在模板编译的过程中，是把template传递给vue，通过正则匹配语法生成AST(抽象语法树)，它会区分静态值和动态的变量，收集动态值的依赖，将AST转化为可执行方法，也就是render,有了这个渲染方法，就可以生成dom。
dom diff
- vue在层级上只考虑单层复用，多层级是通过遍历实现。
- 双向指针，首尾向中间移动
- 移动、新增、删除
- 优先复用 -- key
可以通过key判断是不是可以复用，且快速识别顺序

6.v-for中的key不推荐使用随机数或者index

当数据进行更改的时候，会通过key来判断虚拟dom树是否进行了更改。如果发现了相同的key，就可以直接复用。减少渲染次数，降低了渲染的性能损耗。如果使用随机数就会让dom 每次都是新的，增加了更新成本；如果使用index作为key，插入数据或者删除数据的时候，会导致后面的数据的key绑定的index变化，进而导致重新渲染。

五、组件

1.静态组件和动态组件

静态组件：<componentName />
动态组件： <component :is='currentName' ></component>

2.如何引入异步组件？

components: { my-componets: () => import('./...') }

局部注册：这个动态导入会返回一个 Promise 对象

componets: { my-componets: (resolve) => { require(['./...'], resolve) } }

这个特殊的 require 语法将会告诉 webpack, 自动将你的构建代码切割成多个包，这些包会通过 Ajax 请求加载,类似于全局注册

VUE（一）-- 基础

VUE