在Vue视图显示中,有时候,总是需要一些数据处理然后再显示,这样就可以使用computed属性。
- computed
- computed使用
//v-model 数据绑定
<input type="text" v-model="testName">
//数据显示{{}}
<div class="div_name">{{testName}}</div>
2.computed属性实现
data:function(){
return {
name:"测试",
test:"computed",
lastName:"",
firstName:"",
index:0,
list:[{
name:"王 辉",
age:20
}]
}
},
computed:{
//常规的计算属性 相当于get方法
commenName:function(){
return ""
},
testName:{
//重新写set 和get方法
get:function(){
console.log("index****"+this.index);
return this.lastName+this.firstName +this.index++;
},
set:function (val) {
if (val.indexOf(' ')!=-1) {
var obj = val.split(" ");
if(obj.length>1){
this.lastName = obj[0];
this.firstName =obj[1];
}
}
}
}
}
注意点:computed计算属性,多次获取计算属性,会有缓存,用的还是第一次的结果。
- watch 监听属性中值的变化
- data中普通属性的监听
data:function(){
return {
test:"computed",
}
},
watch:{
test:function(newData,oldData){
}
}
2.需要深度监听的,比如:Array中某一项数据的变化,需要使用到deep,
data:function(){
return {
list:[{
name:"李 辉",
age:20
}]
}
},
watch:{
list:{
handler:function(newData,oldData){
console.log(newData);
console.log("$$$$$$");
console.log(oldData);
},
immediate: true,//在初始化实例时,会触发 handler调用
deep:true //当容器内部的元素发生更改时,会出发handler ,比如 list中第一个元素的name更改成 王二,会触发 handler调用
},
},
学习博客:
https://blog.csdn.net/Hanhanyoona/article/details/81531290