Vue 模板语法、计算属性以及侦听器

插值表达式

文本

在 Vue 中进行数据绑定，我们最常用的方法就是使用 {{ }} 的文本插值。例如：

<span>Hello, {{ name }}</span>

在解析时， {{ name }} 将会被解析为对应的数据对象中 name 属性的值，如果数据对象中的 name 值发生了变化，由于 Vue 是双向数据绑定，所以标签中的内容也会实时更新。

{{ }} 语法只可以替换指定区域的文本内容，不能输出真正的 HTML ，如果需要嵌入 HTML 代码，需要用到 v-html 属性。等同于原生 JS 语法中的 innerHTML 。同理，也有 v-text 等同于 innerText，例：

<span v-html="msg"></span>
<span v-text="htmlMsg"></span>

在解析时， v-html 和 v-text 的 attribute 值，对应着数据对象中的同名 property 值。

属性

v-html 和 v-text 虽然写作 标签的 attribute 格式，但操作的实际上是标签中间的内容，如果想要动态的操作 attribute 的值，应该使用 v-bind 指令，缩写为 : ，例如：

<span v-bind:id="span1"></span>
<span :id="span2"></span>

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a :[attributeName]="url">点击跳转</a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 :href。

注意：动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持：

{{ number + 1 }}

{{ isTrue ? 1 : 2 }}

{{ str.split('').reverse().join('') }}

<div :id="'div-' + index"></div>

注意：模板语法中只支持表达式，不支持语句：

{{ var a = 1 }}

<div :id="if (isTrue) { 'div1' } else { 'div2' }"></div>

计算属性

什么是计算属性

正如上文所说，Vue 模板语法中限制只能使用表达式进行简单运算，如果碰上复杂的逻辑使用 methods 又太过沉重而难以维护。所以，对于复杂逻辑，建议使用计算属性：

let vm = new Vue({
	el: '#app',
	data: {
		message: 'Hello'
	},
	computed: {
		reverseMsg() {
			return this.message.split('').reverse().join('')
		}
	}
})

// message ==> Hello , reverseMsg ==> olleH

reverseMessage 是依赖于 message 的，当 message 发生变化时， reverseMessage 的值也随着发生变化

计算属性（computed）VS 方法（methods）

使用计算属性和使用方法能达到相同的结果，但是两者的缓存机制不同，计算属性是基于他们的响应式依赖进行缓存的，也就是说，只有当响应式依赖的值发生变化时，计算属性才会更新。但是方法在每次调用的时候都会占用资源。

所以，计算属性有一个优点，就是当同一个页面多次调用一个计算属性时，只需要计算一次，之后每次都可以从缓存中取值，因为之后每次调用时，计算属性的响应式依赖并未发生变化。但是，因为这个机制，使得计算属性不能用来存放需要实时更新的数据。

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

let vm = new Vue({
   el: '#vm',
   data: {
       message: 'Hello'
   },
   watch: {
       message: function (val, oldVal) {}
   },
})