vue的computed和watch的区别

你的名字 2022-12-27 07:18 243阅读 0赞

首先，computed和watch都是观察页面的数据变化的。

下面是他们的区别：

### 计算属性computed（一对多，一对一） ###

计算属性将会混入到Vue的实例当中，所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

1、监控自定义的变量，这个变量不可以和data、props里面的变量重复；  
2、computed属性的属性值是函数默认走get方法（必须有返回值），属性都有一个get和set方法；  
3、支持缓存，只有所依赖的数据发生变化才会重新计算，否则会取缓存中的数据；  
4、不支持异步，在computed里面操作异步无效；

<templete>
    	<div>{ { message}}</div>
    </templete>
    <script>
    data(){ 
    	return { 
    		name:'muma',
    		type:'man'
    	}
    },
    computed:{ 
    	//仅读取getter
    	message:function(){ 
    		return `${ this.name}是${ this.type}孩子！！！`
    	}，
    	// 读取getter和设置setter
    	msg：{ 
    	  get: function () { 
            return `${ this.name}是${ this.type}`
          },
          //在给msg重新赋值的时候会调用setter，例如this.msg = '你是谁'。
          set: function (newValue) { //newValue是msg新的值
          	let names = newValue.split('是');
            this.name= names[0];
            this.type= names[1];
          }
    	}
    }
    </script>

### 监听属性watch（多对一） ###

1、监听data、props里面数据的变化；  
2、不支持缓存，每次都会重新计算；  
3、支持异步，监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

<templete>
    	<div>{ { message}}</div>
    </templete>
    <script>
    data(){ 
    	return { 
    		name:'muma',
    		type:'boy',
    		func:'1',
    		obj:{ 
    			label:'aa'
    		}
    	}
    },
    watch:{ 
    	//name变了修改type 
    	name:function(new, old){ 
    		this.type = 'girl';
    	},
    	'func':'funcChange',
    	'obj.label':{ 
    		handler(new, old){ 
    			this.type = 'boy';
    		},
    		immediate:true, //控制是否在第一次渲染是执行这个函数
    		deep:true //控制是否要看这个对象里面的属性变化
    	}
    },
    methods:{ 
    	funcChange(){ 
    		console.log('......')
    	}
    }
    </script>