data: {
firstName: 'one',
lastName: 'two'
},
//计算方法
computed: {
allname:{
//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
get() {//
return this.firstName + ' ' + this.lastName
},
//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
set(val){
const names = val.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: {
被监听的数据: {
handler(新值, 旧值) {
相关代码逻辑...
}
}
}
常见应用
computed:{
stateDemo(){
return this.$store.state.demoState;
}
}
watch:{
stateDemo(){
console.log('vuex变化啦')
}
}
常见错误
当修改父组件传过来的值，会报错
props:['listShop'],
data(){
return{}
},
created(){
this.listShop=30
}
报错，错误是说的避免直接修改父组件传入的值,因为会改变父组件的值
解决方法1，如果传的是简单类型，就在data中重新定义一个变量，改变指向，复杂类型不行，复杂类型存的是指针
//不会有任何报错,也不会影响父组件!
props:['listShop'],
data(){
return{
listShopChild:this.listShop //改变指向
}
},
created(){
this.listShopChild=30
}
但如果是复杂类型，因为存的是指针，赋值给新变量也会改变原始变量值
方法：
1.手动深度克隆
2.Object.assign,只会对只是一级属性复制，比浅拷贝多深拷贝了一层而已,所以还是无法达到深度克隆的目的.
3.强大的JSON.stringify和JSON.parse
4.直接用computed改变
//数组深度克隆:
var x = [1,2,3];
var y = [];
for (var i = 0; i < x.length; i++) {
y[i]=x[i];
}
console.log(y); //[1,2,3]
y.push(4);
console.log(y); //[1,2,3,4]
console.log(x); //[1,2,3]
//对象深度克隆:
var x = {a:1,b:2};
var y = {};
for(var i in x){
y[i] = x[i];
}
console.log(y); //Object {a: 1, b: 2}
y.c = 3;
console.log(y); //Object {a: 1, b: 2, c: 3}
console.log(x); //Object {a: 1, b: 2}
//函数深度克隆
//为什么函数可以直接赋值克隆?
//由于函数对象克隆之后的对象会单独复制一次并存储实际数据，因此并不会影响克隆之前的对象。所以采用简单的复制“=”即可完成克隆。
var x = function(){console.log(1);};
var y = x;
y = function(){console.log(2);};
x(); //1
y(); //2
//方法三 const obj1 = JSON.parse(JSON.stringify(obj));
//方法四
computed:{
listShopChild(){
return this.listShop
}
}
到此这篇关于Vue computed与watch用法区分的文章就介绍到这了,更多相关Vue computed与watch内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
编程 | 2023-02-24 21:36
编程 | 2023-02-21 12:51
编程 | 2023-02-21 12:47
编程 | 2023-02-21 00:15
编程 | 2023-02-21 00:08
编程 | 2023-02-20 21:46
编程 | 2023-02-20 21:42
编程 | 2023-02-20 21:36
编程 | 2023-02-20 21:32
编程 | 2023-02-20 18:12
Python之列表推导式最全汇总(上篇)
加载中,请稍侯......
网友评论