本节的主要内容是学习Vue的三个特性的使用：

• 计算属性
• 监听器
• 过滤器

一，计算属性

计算属性（Computed Properties）是其中非常强大的一个特性：

• 基于依赖的数据进行运算并缓存结果
• 依赖的数据发生变化时会触发重新计算。

相当于模板中的复杂表达式，计算属性要更高效、更可读。

1，用途

数据处理：可以对原始数据进行转换或组合，比如将多个数据源合并成一个。
性能优化：只有当它的相关依赖发生改变时，计算属性才会重新求值。这避免了不必要的计算。
代码清晰：将逻辑放在计算属性中可以使模板保持干净，提高代码的可读性和可维护性。

2，用法

2.1 定义View

下面是一个简单的例子来说明如何使用计算属性。

这是一个简单图书购物车界面。用户可以看到两本书的信息——《西游记》和《水浒传》，每本书都有其单价和数量输入框。总价会根据用户选择的书的数量和单价实时更新。

    <div id="app"><!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 --><ul><li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li><li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li><li>总价：{{totalPrice}}</li>{{msg}}</ul></div>

2.2 声明计算属性

总价totalPrice的计算非常适合使用计算属性来实现。

     new Vue({el: "#app",data: {xyjPrice: 99.98,shzPrice: 98.00,xyjNum: 1,shzNum: 1,msg: ""},computed: {totalPrice(){return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum}}})

如上JS代码，总价totalPrice定义在Vue对象的computed属性下。

效果如下。

3，注意事项

• 计算属性内部可以通过 this 访问 Vue 实例以及其它数据属性。
• 如果计算属性的函数过于复杂，考虑使用方法（methods）代替，因为计算属性的缓存机制可能使得调试变得困难。
• 计算属性也可以声明为只读的，通过添加 getter/setter 的形式来实现。

二，监听器

监听器（Watcher）是框架内部用于响应数据变化的核心机制之一。不过，在 Vue 开发中，我们通常不会直接操作 Watcher 类，而是使用更高级的 API 如 watch 或者在组件选项中定义的 watch 属性来实现侦听器的功能。

下面基于前面的图书购物车为例说明监听器的用法，假设西游记图书的库存只有3本，则当用户输入的数字大于3时，就要提示库存不足。此时就需要监听用户的输入。

1. 使用 watch 监听属性的变化

在 Vue 组件中，使用 watch 属性来监听某个数据属性的变化，并执行相应的函数。

        new Vue({el: "#app",data: {xyjPrice: 99.98,shzPrice: 98.00,xyjNum: 1,shzNum: 1,msg: ""},computed: {totalPrice(){return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum}},//watch监控一个值的变化。从而做出相应的反应。watch: {xyjNum(newVal,oldVal){if(newVal>3){alert("库存超出限制");this.xyjNum = 3}}},})

在这个例子中，每当 xyjNum 的值发生变化时，watch 中定义的函数就会被调用，超过库存则弹窗提示。

注意，watch中的函数对象名称，必须和要监听的属性名一致，如watch中的xyjNum和input的属性xyjNum保持一致。

三，过滤器

过滤器主要用于格式化数据显示，它们接收一个值作为输入并返回一个经过转换的值。过滤器可以定义为全局的或者局部的，并且可以在模板中使用。

基于如下需求学习过滤器的使用，遍历展示model中的用户列表信息，展示时将代表性别的枚举值转换为字符展示，这个转换的过程就可以使用过滤器。

最终效果如下。

模板View。

	<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 --><div id="app"><ul><li v-for="user in userList">{{user.id}} ==> {{user.name}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}</li></ul></div>

model中的用户列表数据。

		   data: {userList: [{ id: 1, name: 'jacky', gender: 1 },{ id: 2, name: 'peter', gender: 0 }]}

1，定义局部过滤器

局部过滤器只在当前 Vue 实例中可用，定义在Vue对象的 filters 属性中。

	  let vm = new Vue({el: "#app",data: {userList: [{ id: 1, name: 'jacky', gender: 1 },{ id: 2, name: 'peter', gender: 0 }]},filters: {// filters 定义局部过滤器，只可以在当前vue实例中使用genderFilter(val) {if (val == 1) {return "男";} else {return "女";}}}})

2，定义全局过滤器

全局过滤器可以在任何 Vue 组件中使用。定义全局过滤器的方式是在 Vue 实例创建之前使用 Vue.filter() 方法。

Vue.filter("gFilter", function (val) {if (val == 1) {return "男~~~";} else {return "女~~~";}
})

3，使用过滤器

在模板中，过滤器通过管道符 | 应用于表达式。

	<div id="app"><ul><li v-for="user in userList">{{user.id}} ==> {{user.name}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}</li></ul></div>

4，过滤器参数

过滤器可以接受额外的参数。
,

Vue.filter('padNumber', function (value, totalLength) {var str = '' + value;while (str.length < totalLength) {str = '0' + str;}return str;
});

使用参数：

<!-- 使用过滤器参数 -->
<p>{{ 42 | padNumber(4) }}</p>
<!-- 结果将是 "0042" -->

5，链式过滤器

多个过滤器可以串联使用。

示例代码：

<p>{{ "hello world" | toUppercase | reverseString }}</p>

这里假设 toUppercase 是另一个定义好的过滤器，上面的代码会先将字符串转为大写，然后再反转字符串。