vue花括号⾥⾯的变量_Vue躬⾏记（1）——数据绑定
Vue.js的核⼼是通过基于HTML的模板语法声明式地将数据绑定到DOM结构中，即通过模板将数据显⽰在页⾯上，如下所⽰。
<
其中<div>元素的内容是⼀个模板的插值，vm是⼀个Vue实例。
⼀、实例
如果要使⽤Vue的功能，那么需要通过Vue()构造函数创建⼀个Vue实例，⽽Vue实例相当于MVVM模式中的ViewModel。注意，所有的Vue组件（后⾯篇章将会分析）都是Vue实例。
1）选项对象
Vue的构造函数能接收⼀个选项对象，包含数据、计算属性、⽅法、模板、⽣命周期钩⼦等成员。上⾯代码中的el是Vue实例的挂载⽬标，既可以是CSS选择器，也可以是DOM元素；data是Vue实例的数据对象，其属性会被加到Vue的响应式系统中，当修改data的属性时，视图会响应变更⽽重新渲染，即vm实例的对应属性也会更新，反之亦然，如下所⽰。
var
注意，如果data属性使⽤了箭头函数，那么this不会指向vm实例。
在实例被创建之后，就能通过vm.$data访问原来的数据对象，⽽vm.content是vm.$t的简写。注意，被冻结后的对象（即调⽤了Object.freeze()⽅法），其属性是⽆法响应式的。
除了$data属性之外，Vue实例还提供了很多其它的属性和⽅法，它们都会以“$”符号为前缀，⽽为了避免与内置的冲突，Vue实例不会代理以“_”或“$”开头的⽤户⾃定义的属性和⽅法。
2）⽣命周期
Vue实例的⽣命周期包括初始化数据、编译模板、挂载、渲染、更新和销毁等，每个阶段都存在对应的钩⼦，以便执⾏相关的业务逻辑。由于⽣命周期钩⼦都会⾃动把this和实例绑定在⼀起，因此不要⽤箭头函数来声明钩⼦。
常⽤的8个⽣命周期可分为4组（如下所列），每组有⼀个名称带before前缀，顾名思义，先于另⼀个钩⼦执⾏，图1描绘了实例的⽣命周期。
图1 Vue实例的⽣命周期
（1）beforeCreate：实例初始化之后回调，⽆法访问data、methods、computed等之中的数据或⽅法。
（2）created：实例创建完成后回调，可访问data、methods、computed等之中的数据或⽅法，由
于还未挂载到DOM中，因此不能成功读取$el。
（3）beforeMount：实例挂载之前回调，将要使⽤的模板编译成render()函数。
（4）mounted：实例挂载到DOM后回调，已替换模板中的插值，可获取el中的DOM元素，但要注意，不能保证其⼦组件也已被挂载。
（5）beforeUpdate：数据更新时回调，发⽣在虚拟DOM之前，可操作现有DOM元素，例如移除其事件监听器等。
（6）updated：DOM重新渲染后回调，可执⾏依赖于DOM的操作，但要在此期间尽量不要更改状态，以免陷⼊死循环，并且不能保证其⼦组件也已被重绘。
（7）beforeDestroy：实例销毁之前回调，此时实例还存在，this仍然能指向它。
（8）destroyed：实例销毁后回调，会解除数据绑定、移除事件、销毁⼦组件等。
除了这8个钩⼦之外，还有3个钩⼦，如下所列。
（1）activated：<keep-alive>元素激活时回调。
施一公开讲啦
（2）deactivated：<keep-alive>元素停⽤时回调。
（3）errorCaptured：捕获到后代组件的错误时回调。
⼆、模板语法
Vue的模板是⼀段特殊的HTML代码，其语法包括插值、指令和修饰符。虽然Vue的模板语法⾮常简洁，但是在内部Vue会进⾏⼀系列操作，例如将模板编译成虚拟DOM的渲染函数render()，结合响应系统最⼤程度的优化DOM操作次数以及⽤最少的代价渲染组件等。
脱光干网
1）插值
Vue会以插值的⽅式将数据传递给模板，⽽插值可以是⽂本、HTML代码、特性和表达式。
（1）⽂本插值是最常见的数据绑定形式，其写法与Mustache中的占位符类似，也需要⽤两个花括号包裹数据。当和v-once指令配合时，能实现单次插值，即阻⽌数据变化时的视图更新。如下代码所⽰，在修改数据对象的text属性后，两个<p>元素所⽣成的内容会有所不同，具体可参考对应的注释。
<
（2）由于模板占位符中的数据会被解释成普通⽂本（为了预防XSS攻击），因此如果要输出HTML代码，需要使⽤v-html指令。如下代码所⽰，第⼀个<p>元素在输出HTML标签时，它的两个特殊字符都被转义了。
<
（3）如果要将数据对象的属性值插到DOM元素的特性（即定义在HTML标签中的标准或⾮标准属性）中，那么得使⽤v-bind指令，如下代码所⽰。注意，当属性值为null、undefined或fal时，相应的特性不会被输出到元素中。
<
（4）模板占位符还⽀持表达式运算，如下代码所⽰。注意，语句是不被允许的，并且在表达式中，只能访问⽩名单⾥的全局变量，例如Math和Date。
<
2）指令
Vue中的指令（Directives）是⼀组以“v-”为前缀的DOM元素特性，它能接收⼀个表达式或参数。其职
责是告知Vue如何处理提供给它的数据，并且当表达式的结果发⽣变化时，将其产⽣的影响反映到DOM上。
指令和参数之间会⽤冒号隔开，例如前⽂⽤于更新DOM元素特性的v-bind。还有⼀个常⽤的v-on指令，⽤于监听事件，如下所⽰，其中click是事件类型，dot是事件处理程序。
<
Vue为v-bind和v-on两个指令提供了专⽤的缩写（如下所⽰），分别⽤“:”和“@”符号表⽰。
<!-- v-bind的缩写 -->
从Vue 2.6.0开始，引⼊了动态参数的概念，在冒号后⾯跟⼀个⽤⽅括号包裹的表达式，如下所⽰，其中type是数据对象的属性，其值会作为参数来使⽤。
大鱿鱼怎么做好吃<
动态参数中的表达式会有⼀些语法约束，例如运算结果得是字符串类型、不能包含空格和引号、避免驼峰⽅式的变量命名，如下所⽰。
超萌Q版萌图<
在DOM中使⽤模板时，eventType会被强制转换成全⼩写的eventtype，从⽽就⽆法在数据对象中读取到它的值了。
3）修饰符
Vue的修饰符（Modifier）是⼀种以“.”开头的特殊后缀，能让指令完成某种特殊⾏为，例如⽤.prevent修饰符取消默认操作，即调⽤事件对象的preventDefault()⽅法，如下所⽰。
<
三、过滤器
过滤器可⽤来格式化模板中的⽂本，存在于占位符和v-bind指令中，紧跟在表达式之后，其写法如下所⽰，name是数据对象的属
性，lowerca是⼀个过滤器，两者⽤“|”符号隔开。
<
注意，⾃Vue 2.0起，所有的内置过滤器（例如capitalize、upperca、json等）都已被移除，官⽅推荐按需加载更专业的库来实现过滤。
1）创建
Vue允许⽤户⾃定义过滤器，可在实例的filters选项中注册局部过滤器，如下所⽰。
var
也可以在创建Vue实例之前，通过Vue.filter()⽅法注册全局过滤器，如下所⽰。
Vue
当局部过滤器和全局过滤器重名时，会优先采⽤局部过滤器。
2）链式调⽤
多个过滤器可通过“|”符号串联实现链式调⽤，如下所⽰。
{{ name | lowerca | capitalize }}
lowerca过滤器会接收name的值，然后将其计算结果传给capitalize过滤器。
3）传递参数
由于过滤器本质上还是⼀个函数，因此它⽀持多个参数的传⼊，如下所⽰，compare过滤器会接收三个参数，分别是number和threshold两个数据对象的属性，以及⼀个常量10。
<
注意，Vue 2.0取消了⽤空格来标记过滤器参数的⽅式，下⾯的调⽤是⽆效的。
<
四、计算属性
在模板中适合简单的声明式逻辑，⽽应避免频繁的进⾏复杂计算，这样既不利于维护，也会让模板结构变得臃肿⽽混乱。为了能合理的执⾏复杂表达式，Vue引⼊了计算属性的概念。
计算属性在模板中的数据绑定和普通属性⼀样，但需要以函数的⽅式来定义。在下⾯的代码中，newName是⼀个计算属性，⽤来让name属性重复两次再提取末尾两个字符，在它的getter函数中引⽤了⼀个指向vm实例的this。
<
有故事的家
注意，计算属性往往会依赖数据对象的属性或其它计算属性，也就是说，当依赖的属性被修改时，计算属性会⾃动更新。
1）缓存
计算属性和⽅法有⼀个很⼤的不同，那就是它能被缓存。在下⾯的代码中，声明了⼀个getName()⽅法，虽然它的返回结果和之前的计算属性newName的值相同，但是当依赖的name属性不发⽣变化时，两者的执⾏⽅式会有所不同。
var
当多次访问newName时，读取的是其缓存的值，不会执⾏它的getter函数，⽽⽅法每次都会执⾏⼀遍。由于计算属性能减少冗余的运算，因此它很适合处理那些耗时且性能开销巨⼤的操作。
2）写⼊
默认情况下只需要定义计算属性的getter函数，不过Vue也为其提供了tter函数，使得计算属性在写⼊时能处理更为复杂的业务逻辑，如下所⽰。
var
当为计算属性total赋值时（如下所⽰），就会调⽤它的tter函数，并更新vm.price。
vm
五、响应式原理
Vue采⽤了⾮侵⼊性的响应式系统，当把数据对象传给Vue实例的data属性时，Vue会通过Object.defineProperty()⽅法将它的每个属性替换成getter和tter两个函数，下⾯⽤⼀个简单的⽰例展⽰Vue的基本思路。
const如狼似虎的意思
经过这波操作后，就能让Vue拥有追踪属性变化的能⼒，并在属性被访问和修改时通知关联的视图重新渲染。在体验响应式所带来的便利的同时，也要知晓它的⼀些限制，接下来会分析Vue检测对象和数组发⽣变动时的注意事项。
1）对象
由于JavaScript⽆法监听对象属性的添加或删除，因此只有在Vue实例化时才能对数据对象的根属性做getter和tter的替换，即转换成响应式的属性。Vue不允许动态添加根级的响应式属性，这些属性
必须预先声明，如下所⽰，虽然age是vm实例的⼀个根属性，但它是在实例化后声明的，所以也就⽆法成为响应式的属性了。
实践出真知英语var
除了内部的技术限制之外，提前声明响应式属性，也便于开发⼈员理解代码的意图。对于已创建的实例，有两种⽅式声明⾮根级的响应式属性，第⼀种是⽤全局的Vue.t()⽅法或Vue实例的$t()⽅法，在下⾯的代码中，为people对象声明了⼀个响应式的age属性。
var
第⼆种是⽤Object.assign()⽅法，可⼀次性添加多个属性，如下所⽰，将原对象和新增的属性合并成⼀个新对象，再赋给
vm.people。
vm
2）数组
Vue⽆法检测下⾯两种数组的变动，以vm实例的names属性为例。
（1）通过索引设置数组的元素。
（2）缩短数组的长度。
羡慕英文
var
要检测第⼀种变动，可以使⽤Vue.t()⽅法或数组的splice()⽅法，⽽要检测第⼆种变动，就只能使⽤splice()⽅法了，如下所⽰。
//检测第⼀种变动
