computed计算属性和watch区别以及各自的使用

一、总述

computed

和

watch

都是

vue

框架中的用于监听数据变化的属性。

二、computed计算属性

1、使用方法和

data

中的数据一样，但是类似一个执行方法
2、在调用时候不加

（）

3、必须有

return

返回
4、如果函数所依赖的属性没有发生变化，从缓存中读取
5、应用场景—求和，示例

<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监听

1、

watch

的函数名称必须和data中的数据名一致
2、

watch

中的函数有两个参数，前者是

newVal

，后者是

oldVal

3、

watch

中的函数是不需要调用的
4、

watch

只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合

deep：true

属性使用
5、

immediate:true

页面首次加载的时候做一次监听
6、应用场景—即使搜索，代码示例

<template><div>
        vue使用watch监听实现类似百度搜索功能
        <div><inputtype="text"class="search"placeholder="搜索"v-model.trim='keyword'/></div><divv-show="keyword"><ul><liv-for="item in cityList":key="item.id"@click="handleCityClick(item.name)">
                    {{item}}
                </li></ul></div></div></template>

<script>// 防抖函数const delay =(function(){let timer =0;returnfunction(callback, ms){clearTimeout(timer);
        timer =setTimeout(callback.ms)}})()exportdefault{data(){return{
            keyword:'',
            cityList:[],
            timer:null,
            jsonData:[{'id':1,'name':'北京'},{'id':2,'name':'上海'},{'id':3,'name':'广州'},{'id':4,'name':'深圳'},]}},
    watch:{keyword(){//函数防抖if(this.timer){clearTimeout(this.timer)}//删除文字  清零if(!this.keyword){this.cityList =[]return}this.timer =setTimeout(()=>{const result =[]this.jsonData.forEach(val=>{if(val.name.indexOf(this.keyword)>-1){
                        result.push(val.name)}});this.cityList = result
                console.log(this.cityList)},100)}},}</script>

四、区别

1、功能：

computed

是计算属性；watch是监听一个值的变化执行对应的回调
2、是否调用缓存：

computed

函数所依赖的属性不变的时候会调用缓存；

watch

每次监听的值发生变化时候都会调用回调
3、是否调用return：

computed

必须有；watch可以没有
4、使用场景：

computed

当一个属性受多个属性影响的时候；例如购物车商品结算；

watch

当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步：

computed

函数不能有异步；

watch

可以