- tip:这三者有点相像,之前工作中基本没有使用过
filters
,最近面试经常被问到filters
的使用方法。 - 之前有过初始化一个数据的需求,发现
computed
实现不了,最后查阅资料,通过computed
闭包传参实现了。其实完全可以用filters
实现!!!
1、computed
this
指向的是Vue
对象- 一般不能传值(需要传值可以利用闭包解决)
- 一般有返回值
- 使用场景(购物车的总价可以使用)
- 计算属性是基于它们的依赖进行缓存的,只有里面的值变化了才会重新求值
- 数据量操作大的话 还是使用methods
下面举个闭包传值用法的例子
<ul>
<li
v-for="(i,index) in list"
:key="index">
{{computeVal(i.name)}}
</li>
</ul>
data() {
return {
list:[
{name:'lfz'},
{name:'sxy'},
{name:'ljd'},
{name:'xjy'},
]
}
},
computed:{
computeVal(){
return (val)=>{
console.log(27,val) //这里能输出list里面name的值
return val.toUpperCase()// 返回大写name
}
}
},
这个做法可以初始化数据,其实可以被filters
代替
2、filters
this
无法访问vue
实例。- 利用
{{params | fn}}
来声明方法。前面为参数,后面为方法。 可以串联. - 使用场景,数据格式化,例如时间的初始化等...
- 传参多个,
{{params_1 | fn(params_2,params_3)}}
遇到的问题
filters
会根据参数而变化,有时候接口没有拿到数据为undefind
的时候也会进filters
,所以要过滤。判断接口是否调用完毕。
参考文献--官方链接
<ul>
<li v-for="(i,index) in list" :key="index">{{ i.name | filtersName }}</li>
</ul>
export default {
name: "test_2",
data() {
return {
list:[
{name:'lfz'},
{name:'sxy'},
{name:'ljd'},
{name:'xjy'},
]
}
},
filters:{
filtersName(name){
return name.toUpperCase()
}
},
3、watch
- 监听一个
data
内定义的对象。 - 多层对象监听需要用到
deep:true
。 例如需要监听totalPrice
时 - 生命周期在created前面
foods: {
totalPrice:
}
demo
watch: {
foods: {
handler(newVal, oldVal){
this.calcConditionAmount()//计算满足金额
},
immediate: true,// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
deep: true //深度监听
}
}
4、computed
与watch
区别
1.watch擅长处理的场景:一个数据影响多个数据
2.computed擅长处理的场景:一个数据受多个数据影响