主题
Vue 2 语法速览
Vue 是一套用于构建用户界面的渐进式框架。Vue 2 已经终止支持且不再维护。 请升级到 Vue 3 或了解有关 Vue 2 终止支持 (EOL) 的信息。
场景
- 实例
Vue 应用是通过用 Vue 函数创建一个新的 Vue 实例开始的：
js
const vm = new Vue({
// 选项对象
});vm：ViewModel 的缩写，这个变量名表示 Vue 实例，该实例叫 根 Vue 实例。- Vue 组件就是 Vue 实例。
组件
组件可能被用来创建多个实例。
API
attribute/指令
直接在组件上编写属性，如 <component attr="江湖聊IT"></component> 中的 attr。
key
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。
- 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
- 而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
-> 查看更多官网对 key 的说明。
ref
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
- 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
- 如果用在子组件上，引用就指向组件实例：
-> 查看更多官网对 ref 的说明。
is
用于动态组件且基于 DOM 内模板的限制来工作。
-> 查看更多官网对 is 的说明。
v-slot
v-slot 是 2.6.0 新增的。slot 和 slot-scope 已废弃。
用于将元素或组件表示为作用域插槽，标记往哪个具名插槽中插入子组件内容。
限用于 <template> 上。
-> 查看更多官网对 v-slot 的说明。
v-model
随表单控件在表单控件或者组件上创建双向绑定，型不同而不同。
v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text和textarea元素使用valueproperty 和input事件；checkbox和radio使用checkedproperty 和change事件；select字段将value作为 prop 并将change作为事件。
-> 查看更多官网对 v-model 、表单输入绑定的说明。
v-bind
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
缩写使用 :。
-> 查看更多官网对 v-bind 的说明。
选项/数据
注意
注意，不应该使用箭头函数来定义 method、watch 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
data
Vue 实例的数据对象，只接受 function。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。
一旦观察过，你就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前，就声明所有的根级响应式 property。
实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 vm.$data.a。
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！
可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
-> 查看更多官网对 data 的说明。
props
用于接收来自父组件的数据，可以是数组或对象，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
对象的语法：
- type：可以是下列原生构造函数中的一种。
- default：any。为该 prop 指定一个默认值。
- required：Boolean。定义该 prop 是否是必填项。
- validator：Function。自定义验证函数会将该 prop 的值作为唯一的参数代入。
-> 查看更多官网对 props 的说明。
computed
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。
注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例。
-> 查看更多官网对 computed 的说明。
methods
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为 Vue 实例。
-> 查看更多官网对 methods 的说明。
watch
一个对象
- 键是需要观察的表达式;
- 值是对应回调函数。值也可以是方法名，或者包含选项的对象。
-> 查看更多官网对 watch 的说明。
选项/DOM
#el
提供一个在页面上已经存在的 DOM 元素作为 Vue 实例的挂载目标，在实例挂载之后，元素可以用 vm.$el 访问。
选项/生命周期钩子
所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例。
create: 是实例创建。
beforeCreate:- 实例初始化已经完成，负责数据侦听和事件/侦听器的配置之前同步调用。
- 实例还未创建创建。
- created：
- 此时实例已经创建完成
- 但还没有挂载，所以
$el还没有被定义。