Vue基础语法之计算属性（computed）、侦听器（watch）、过滤器（filters）1、Vue 实例选项
在实例化Vue对象时，需要为Vue的构造函数提供⼀系列的配置信息，代码如下：
new Vue({
//选项
})
当使⽤ new 操作符创建 Vue 实例时，可以为实例传⼊⼀个选项对象，选项对象中有很多类型的数据，具体内容如下：数据选项：data、props、propsData、computed、methods、watch
DOM选项：el、template、render、renderError
⽣命周期选项：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured
资源选项：directives、filters、components
组合选项：parent、mixins、extends、provide、inject
其他选项：name、delimiters、functional、model、inheritAttrs、comments
对于选项的学习，⼤家可以参考 Vue 官⽹的 API ⽂档，本章教程中只对 Vue 中的计算属性、过滤器、侦听器三个核⼼的选项做讲解。2、计算属性（computed）
2.1、computed 的基本⽤法
计算属性就是 Vue 实例选项中的 computed，computed 的值是⼀个对象类型，对象中的属性值为函数，⽽且这个函数没办法接收参数，如果想为某个计算属性传参的话，可以使⽤闭包的⽅式。
这⾥需要注意的是，计算属性不能声明为箭头函数！ 因为箭头函数中的 this 指向的是上下⽂中的 this，这样就不能在计算属性的函数中获取 Vue 实例对象 this 了。
计算属性有以下特点：
模板中放⼊太多的逻辑会让模板过重且难以维护，使⽤计算属性可以让模板更加的简洁。
计算属性是基于它们的响应式依赖进⾏缓存的。
computed⽐较适合对多个变量或者对象进⾏处理后返回⼀个结果值，也就是数多个变量中的某⼀个值发⽣了变化则我们监控的这个值也就会发⽣变化。
⽰例代码：
<div id="app">
<p>{{ total }}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
a:1
},
computed:{
total(n){
return this.a +5
}
}
})
</script>
在浏览器中运⾏的结果如下：
2.2、computed 作为函数传参
computed 对象的属性值虽然是声明为函数，computed 的⽤法是和 data ⼀样的，作为属性使⽤，如果要把 computed 作为函数使⽤，可以返回⼀个闭包函数。⽰例代码如下：
<div id="app">
<p>{{ total(6) }}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
a:1
},
computed:{
total(){
return(n)=>{
return this.a + n
}
}
}
})
</script>
在浏览器中运⾏的效果如下：
2.3、计算属性和函数的区别
虽然计算属性（computed）和函数（methods）的声明过程是很相似的，但是功能上还是有所差别的，其中最⼤的区别就是 计算属性可以根据它所依赖的响应式数据进⾏缓存 ，简单来说，就是在计算属性声明的函数中，如果染回值依赖了 data 中声明的响应式数据的话，只有当依赖的 data 中的数据发⽣变化时，当前的计算属性函数才会重新执⾏，否则的话就直接获取上次执⾏后缓存的结果。这样做的好处是可以提⾼性能，减少不必要的重复运算。
⽰例代码如下：
<!--
当多次调⽤ reverseString  的时候
只要⾥⾯的 num 值不改变他会把第⼀次计算的结果直接返回
直到data 中的num值改变计算属性才会重新发⽣计算
-->
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
<!-- 调⽤methods中的⽅法的时候他每次会重新调⽤ -->
<div>{{reverseMessage()}}</div>
<div>{{reverseMessage()}}</div>
</div>
<script type="text/javascript">
/*
计算属性与⽅法的区别：计算属性是基于依赖进⾏缓存的，⽽⽅法不缓存
*/
var vm =new Vue({
el:'#app',
data:{
msg:'Nihao',
num:100
},
methods:{
reverseMessage:function(){
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
//computed属性的声明和data属性、methods属性是平级关系
computed:{
filter过滤对象数组//reverseString属性名称是⾃定义的
reverseString:function(){
console.log('computed')
var total =0;
// 当data中num 属性的值发⽣改变时，reverseString 函数会⾃动进⾏计算
for(var i=0;i<=this.num;i++){
total += i;
}
// 在reverseString函数中必须要有return，否则在页⾯中⽆法获取到计算后的值
return total;
}
}
});
</script>
2.4、计算属性的 getter 和 setter 函数
计算属性虽然可以像 data 属性⼀样取值，但是如果要对计算属性赋值的话，必须使⽤ setter ⽅法，⽰例代码如下：
<p>{{ total }}</p>
<button @click="reset()">重新计算</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
a:1
},
computed:{
total:{
get(){
return this.a +5
},
set(num){
// 接收 reset() 函数内的赋值
this.a = num
}
}
},
methods:{
reset(){
}
}
})
</script>
点击重新计算按钮之前：
点击重新计算按钮之后：
在 reset() 函数中为计算属性 total 赋值，会被计算属性中的 set() 函数接收，然后再把值传给 data 中的 a 变量，那么此时获取到的计算属性值就是更新后的 a 变量 +5 之后的结果。
3、侦听器（watch）
3.1、watch 的基本⽤法
watch是，其值为⼀个对象，对象中的属性值可以为函数、对象和数组。当data中的⼀个属性需要被观察期内部值的改变时，可以通过watch来监听data属性的变化。
watch的基本⽤法如下：
使⽤watch来响应数据的变化
⼀般⽤于异步或者开销较⼤的操作
watch 中的属性 ⼀定是data 中 已经存在的数据
当需要监听⼀个对象的改变时，普通的watch⽅法⽆法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进⾏深度监听
⽰例代码：
<!-- 验证⽤户名 -->
<div id="app">
<div>
姓：<input type="text" v-model='lastName'>
</div>
<div>
名：<input type="text" v-model='firstName'>
</div>
<div>
全名：{{fullName}}
</div>
</div>
<script type="text/javascript">
var vm =new Vue({
el:'#app',
data:{
firstName:'张',
lastName:'三'
},
// 计算属性
watch:{
firstName(val){
this.fullName = val +' '+this.lastName;
},
lastName(val){
this.fullName =this.firstName +' '+ val;
}
}
});
</script>
watch 对象中的 firstName 对应着 data 中的 firstName ，当 firstName 值发⽣改变时会⾃动触发 watch 中的 firstName() 函数的执⾏。同理，watch 中的 lastName 对应的也是 data 中的 lastName。
watch 对象中的函数属性的参数有两个，参数⼀是对应 data 中相同变量名属性被修改后的新值，参数⼆是该 data 属性修改前的旧值。3.2、侦听器的配置项
如果要监听的 data 属性值是⼀个对象或者是数组，如果对象嵌套层级⽐较深的情况下，需要开启 watch 的深度监听。⽰例代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。