[vue] watch对比computed

computed计算属性实现姓名案例

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
</div>

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
	},
	computed:{
		fullName(){
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		}
	}
})

watch监视实现姓名案例

<div id="root">
    姓：<input type="text" v-model="firstName"> <br /><br />
    名：<input type="text" v-model="lastName"> <br /><br />
    全名：<span>{{fullName}}</span> <br /><br />
</div>

const vm = new Vue({
   el: '#root',
   data: {
       firstName: '张',
       lastName: '三',
       fullName: '张-三'
   },

   watch: {
       firstName(val) {
           this.fullName = val + '-' + this.lastName
       },
       lastName(val) {
           this.fullName = this.firstName + val + '-'
       },

   }
})

对比

在姓名案例中，data数据中，watch方法需要先设置好一些变量。比如fullname，computed则不用。

在watch中需要监视两个变量。computed需要计算一次全名的组合，返回一个fullname即可。
在不同的案例，这两个方法有不同的特点和优势。当前案例，使用计算属性更简便。

姓名案例新需求时使用watch法

1.假设有新需求，即，输入框内输入姓名后，显示全名处，延迟1秒后显示。计算属性，则无法实现。

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
		fullName:'张-三'
	},
	watch:{
		firstName(val){
		延时1000毫秒后执行全名的更新
			setTimeout(()=>{
				this.fullName = val + '-' + this.lastName
			},1000);
		},
		lastName(val){
			this.fullName = this.firstName + '-' + val
		}
	}
})

computed和Iwatch之间的区别:

computed能完成的功能，watch 都可以完成。

watch能完成的功能，computed不一 定能完成，例如: watch可以进行异步操作。

---

参考： [前端VUE3.0,DAY14，watch对比computed](https://blog.csdn.net/weixin_48681463/article/details/119416055)