vue查漏补缺（一）-computed和watch区别：

最新推荐文章于 2023-02-06 17:48:04 发布

888小婷

最新推荐文章于 2023-02-06 17:48:04 发布

阅读量1.1k

点赞数

分类专栏：学习文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_40674204/article/details/124076757

版权

学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、使用

**
1.computed使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computed属性购物差演示</title>
    <!--<script src="vue.js"></script>-->
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <p>
        <button @click="add">添加商品</button>
    </p>
    <table border="1">
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in shopingCarts">
            <td><input v-model="item.goodsName"/></td>
            <td><input v-model="item.price"/></td>
            <td><input v-model="item.quantity"/></td>
            <td>
                <button @click="remove(index)">删除</button>
            </td>
        </tr>
    </table>
    <p>
    <h3>总价: {{totalPrice}} 元</h3></p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            shopingCarts: [
                {goodsName: '', price: '', quantity: ''}
            ]
        },
        computed: {
            totalPrice: function () {
                let total = 0;
                this.shopingCarts.forEach(function (item, index) {
                    let subtotal = item.price * item.quantity;
                    total += subtotal;
                });
                return total;
            }
        },
        methods: {
            add: function () {
                this.shopingCarts.push({goodsName: '', price: '', quantity: ''});
            },
            remove: function (index) {
                this.shopingCarts.splice(index, 1);
            }
        }

    });
</script>
</body>
</html>

2.watch的是使用：
(1)watch常见用法：

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

new Vue({
  el: '#root',
  data: {
    cityName: 'beijing'
  },
  watch: {
    cityName(newName, oldName) {
      console.log("cityName的新赋值："+newName,"cityName的原先值："+oldName)
    }
  } 
})

（2）watch监听对象属性变化：如果只是监听对象的指针是否改变，上面的方法已经可以完成监听。但是当对象中的属性值发生改变时，以上的方法就会失效。这是就需要用到deep。

<input type="text" v-model="address.city"/>
<input type="text" v-model="address.country"/>

export default {
  data() {
    return {
      address: {
        city: 'beijing',
        country:'xicheng'
      }
    }
  },
  watch: {
    address: {
      handler(news, olds) {
		console.log("address属性值发生改变")
      },
      deep: true
    }
  }
}

(3)watch监听对象某一属性

<input type="text" v-model="address.city"/>
<input type="text" v-model="address.country"/>

export default {
  data() {
    return {
      address: {
        city: 'beijing',
        country:'xicheng'
      }
    }
  },
  watch: {
   'address.city': {
      handler(news, olds) {
		console.log("我只监听address.city是否发生改变，address.country改变不影响我")
      }
    }
  }
}

（4）监听前回调：有时候我们需要拦截数据的变化，在数据变化之前做一些判断，这是需要用到“immediate”.

new Vue({
  el: '#root',
  data: {
    cityName: 'beijing'
  },
  watch: {
    cityName: {
      handler(news, olds) {
		if(news=="suzhou"){
			console.log("我喜欢苏州")
		}
      },
      immediate: true
    }
  } 
})

二、区别比较

1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
4、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
5、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.