vue-计算属性和监视属性的区别和使用方法

转载于：https://blog.csdn.net/qq_38110274/article/details/121242203  作者：我是天之涯

一、总述

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>
            <input type="text" class="search" placeholder="搜索" v-model.trim='keyword' />
        </div>
        <div v-show="keyword">
            <ul>
                <li v-for="item in cityList" :key="item.id" @click="handleCityClick(item.name)">
                    {{item}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// 防抖函数
const delay = (function () {
    let timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback.ms)
    }
})()
export default {
    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可以