文章目录
本节的主要内容是学习Vue的三个特性的使用：
- 计算属性
- 监听器
- 过滤器
一，计算属性
计算属性（Computed Properties）是其中非常强大的一个特性：
- 基于依赖的数据进行运算并缓存结果
- 依赖的数据发生变化时会触发重新计算。
相当于模板中的复杂表达式，计算属性要更高效、更可读。
1，用途
数据处理 ：可以对原始数据进行转换或组合，比如将多个数据源合并成一个。
性能优化 ：只有当它的相关依赖发生改变时，计算属性才会重新求值。这避免了不必要的计算。
代码清晰：将逻辑放在计算属性中可以使模板保持干净，提高代码的可读性和可维护性。
2，用法
2.1 定义View
下面是一个简单的例子来说明如何使用计算属性。
这是一个简单图书购物车界面。用户可以看到两本书的信息------《西游记》和《水浒传》，每本书都有其单价和数量输入框。总价会根据用户选择的书的数量和单价实时更新。
javascript
<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的计算非常适合使用计算属性来实现。
clike
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 属性来监听某个数据属性的变化，并执行相应的函数。
clike
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。
clike
<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 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中的用户列表数据。
clike
data: {
userList: [
{ id: 1, name: 'jacky', gender: 1 },
{ id: 2, name: 'peter', gender: 0 }
]
}1，定义局部过滤器
局部过滤器只在当前 Vue 实例中可用，定义在Vue对象的 filters 属性中。
js
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() 方法。
js
Vue.filter("gFilter", function (val) {
if (val == 1) {
return "男~~~";
} else {
return "女~~~";
}
})3，使用过滤器
在模板中，过滤器通过管道符 | 应用于表达式。
html
<div id="app">
<ul>
<li v-for="user in userList">
{{user.id}} ==> {{user.name}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
</li>
</ul>
</div>4，过滤器参数
过滤器可以接受额外的参数。
,
js
Vue.filter('padNumber', function (value, totalLength) {
var str = '' + value;
while (str.length < totalLength) {
str = '0' + str;
}
return str;
});使用参数：
html
<!-- 使用过滤器参数 -->
<p>{{ 42 | padNumber(4) }}</p>
<!-- 结果将是 "0042" -->5，链式过滤器
多个过滤器可以串联使用。
示例代码：
html
<p>{{ "hello world" | toUppercase | reverseString }}</p>这里假设 toUppercase 是另一个定义好的过滤器，上面的代码会先将字符串转为大写，然后再反转字符串。