携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天点击查看活动详情

Vue内置指令

1. v-bind单向绑定解析表达式，简写为 ：XXX v-model
2. 双向数据绑定v-for遍历数组、对象、字符串
3. v-on绑定事件监听；简写为 @
4. v-if 条件渲染 (动态控制节点是否存在) v-if-else v-show 控制display属性，切换元素的显示、隐藏
5. v-text向其所在节点渲染文本内容。与插值表达式不同：v-text会替换掉节点中的内容 {{xxx}} 不会
6. v-html向指定节点中渲染包含HTML结构的内容。与插值表达式的区别：

• ① v-html会替换掉节点中所有的内容，{{xxx}} 不会
• ② v-html可以识别HTML结构。 v-html 有安全性问题：在网站上动态渲染任意 HTML 是非常危险的，容易导致 xss 攻击 要在可信的内容上使用 v-html，永远不要在用户提交内容上使用 v-html

8. v-cloak(没有值) 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除掉v-cloak 属性。使用CSS 配合 v-cloak 可以解决网速慢时页面展示出{{xxx}} 的问题
9. v-once 所在节点在初次动态渲染后，就视为静态内容了。以后数据的改变不会引起 v-once 所在的结构的更新，可以用于优化性能。
10. v-pre 跳过其所在节点的编译过程。可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

生命周期

生命周期回调函数、生命周期函数、生命周期钩子是 Vue 在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改，但函数的具体内容是根据需求编写的。生命周期函数中的 this 是指向 Vue实例对象 或 Vue组件实例对象的。

创建

beforeCreate: data和el均位初始化，值为undefined。
create: 此时：可以通过 vm 访问到 data 中的数据、methods 中配置的方法。
el还未初始化，此阶段 Vue 开始解析模板，生成虚拟 DOM (内存中)，但页面还不能显示解析好的内容

挂载：

beforeMount：  data、el均已初始化此时，页面呈现的是未经 Vue 编译的 DOM 结构。所有对 DOM 的操作，最终都不奏效。
mounted： 页面呈现的是经过 Vue编译 的DOM。 至此，初始化过程结束，一般在此运行：开启定时器、发送网络请求、订阅信息、绑定自定义事件等初始化操作

更新

beforeUpdate： 此时，数据是新的，但页面是旧的，根据更新数据，生成新的虚拟DOM，随后与旧虚拟DOM进行比较，最终完成页面更新。
updated： 此时，数据是新的，页面也是新的。即，数据和页面保持同步

销毁

beforeDestroy： 此时，data、methods、指令等都处于可用状态，马上要执行销毁过程。一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等 收尾操作。

destroyed： vm.$destroy()完全销毁一个实例。清理它与其他实例的连接，解绑它的全部指令，及事件监听器。

声明周期执行顺序

将要创建(beforeCreate) → 创建完毕 → 将要挂载(beforeMount) → 挂载完毕(mounted) [重要的钩子] → 将要更新(beforeUpdate) → 更新完毕 → 将要销毁(beforeDestroy) [重要的钩子] → 销毁完毕(调用 destroyed 函数)