Vue中computed和watch的使用

watch的详细用法

• 在Vue中，用watch来响应数据的变化

 <input type="text" v-model="userName"/>  

• 第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，
  只有当值改变的时候 才会执行

>第一种
//监听   当userName值发生变化时触发
watch: {
	userName (newName, oldName) {
		console.log(newName)
	}
}
`

• 页面首次加载的时候做一次监听数 则需要 设置
  immediate为true

第二种
watch: {
	userName: {
		handler (newName, oldName) {
			console.log(newName)
		},
		immediate: true
	}
}

• watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep为true属性使用

第三种
<input type="text" v-model="cityName.name" />
data (){
	return {
		cityName: {name:'北京'}
	}
},
watch: {
	cityName: {
		handler(newName, oldName) {
			console.log(newName)
		},
		immediate: true,
		deep: true
	}
}

• 此时会给cityName的所有属性都加上监听函数，如果属性较多时 可以使用如下

watch: {
	'cityName.name': {
		handler(newName, oldName) {
			console.log(newName)
		},
		immediate: true,
		deep: true
	}
}
// 或者
   cityName.name": function (newValue) {
      this.getDevNameList(newValue); // 接口直接调用这个最新的值
    },
     immediate: true,
    deep:true

注意：

• 数组的变化不需要深度监听
• 在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域

computed计算属性

1、使用方法和data中的数据一样，但是类似一个执行方法
2、在调用时候不加（）
3、必须有return返回
4、如果函数所依赖的属性没有发生变化，从缓存中读取

<el-form>
   <el-row>
     <el-col :span="24" style="display:flex;justify-content:flex-end;">
       <span><i>当前价税合计：</i>{{Total}}</span>
     </el-col>
   </el-row>
 </el-form>

computed:{
    Total(){
      let price = 0;
      for (let i = 0;i<this.tableData.length;i++) {
        price += this.tableData[i].taxUnitPrice * this.tableData[i].invNum
      }
      this.detailedSend.total = price
      return price;
    },
  },

watch computed 区别

0、computed 不能与 data 里重复 必须有 return 是多个值引起一个值变化 同步 ；
1、功能：computed是计算属性；watch是监听一个值的变化执行对应的回调
2、是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3、是否调用return：computed必须有；watch可以没有
4、使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步：computed函数不能有异步；watch可以