watch和computed的区别：

computed :

支持缓存，只有依赖数据发生改变，才会重新进行计算

不支持异步，当computed内有异步操作时无效，无法监听数据的变化

puted 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的

4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch：

不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4.当一个属性发生变化时，需要执行对应的操作；一对多；

5.如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。

实际项目中的使用：

watch：

实现效果

代码示意：

watch:{'tableData.scienceStaffNumPer':{ // 监听科技人员input数值，设置单选按钮//tableData.scienceStaffNumPer 是data中定义的值handler(val){if(!val){this.tableData.scienceStaffNumFlag = nullreturn}var num =parseFloat(val) if(num==0){this.tableData.scienceStaffNumFlag = '0'}if (num>0&&num<5) {this.tableData.scienceStaffNumFlag = '1'}if(num>=5&&num<10){this.tableData.scienceStaffNumFlag = '2'}if(num>=10){this.tableData.scienceStaffNumFlag = '3'}},deep:true, // 立即进行监听immediate:true // 深度监听},}

computed：

需求：输入框只能输入0-100之间的数字，并且保留两位小数

代码示意：

computed: {techInputData: { // 科技人员input输入框输入的值//techInputData 表示在computed中定义的一个数据，这个字段绑定到input输入框中computed有两个方法，一个是set，一个是get get返回这个计算好的数据get() {var value = this.tableData.scienceStaffNumPer // 将输入框的值赋值给valueif (Number(value)!==parseFloat(value)) { // 判断输入的是否是数字,如果不是，返回空return ''}if (value < 0) { // 如果输入的值小于0return 0;} else if (value >= 100) { // 如果输入的值大于等于100return 100;} else {return value.toString().match(/^\d+(?:\.\d{0,2})?/) // 只能输入小数点后两位}},set(val) { // set表示将计算好的数据 设置给 某个值//val 是get 计算好后的数据this.tableData.scienceStaffNumPer = val; // 重新将计算属性处理过的值，赋值给这个input},},}

如果觉得《watch监听和computed计算属性的使用和区别》对你有帮助，请点赞、收藏，并留下你的观点哦！