Vue 2教程：理解和应用watch侦听器与computed计算属性

狗蛋的博客之旅

已于 2023-05-21 09:47:07 修改

阅读量600

点赞数

分类专栏： Vue2 文章标签： vue.js 前端 javascript

于 2022-09-26 16:10:36 首次发布

本文链接：https://blog.csdn.net/weixin_43263566/article/details/127054123

版权

Vue2 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、watch 侦听器

1.1 什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

语法格式如下：

 const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin'
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // newVal是变化后的“新值”，newVal是变化前的“旧值”
        username(newVal,oldval) {
          console.log(newVal,oldval)
        }
      }
    })

1.2 使用 watch 检测用户名是否可用

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

  // 所有的侦听器，都应该被定义到 watch 节点下
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后
        username(newVal) {
          if (newVal === '') return
          // 1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！
          $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
            console.log(result)
          })
        }
      }

1.3 immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。示例代码如下：

  watch: {
        username: {
          // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
          handler: async function (newVal) {
            if (newVal === '') return
            const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
            console.log(res)
          },
          // 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
          immediate: true
        }
      }

1.4 deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，代码示例如下

data:{
  info:{username:'admin'}
},
watch: {
        info: {
          // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
          handler(newVal) {
            console.log(newVal.username);
          },
          // 表示开启深度监听
          deep: true,
        }
      }

1.5 监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

data:{
  info:{username:'admin'}
},
watch: {
        'info.username': {
          // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
          handler(newVal) {
            console.log(newVal);
          }
        }
      }

2、computed 计算属性

2.1 什么是计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：

   <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
    }
  </style>
 
<div id="app">
    <div>
      <span>R：</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G：</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B：</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>

    <!-- 专门用户呈现颜色的 div 盒子 -->
    <!-- 在属性身上，: 代表  v-bind: 属性绑定 -->
    <!-- :style 代表动态绑定一个样式对象，它的值是一个 {  } 样式对象 -->
    <!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 -->
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    </div>
    <button @click="show">按钮</button>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      // 所有的计算属性，都要定义到 computed 节点之下
      // 计算属性在定义的时候，要定义成“方法格式”
      computed: {
        // rgb 作为一个计算属性，被定义成了方法格式，
        // 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    });

    console.log(vm)
  </script>

2. 2计算属性的特点

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

3、watch 侦听器与 computed 计算属性的区别

区别：

功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
是否调用缓存：computed 中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
是否调用 return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）

计算属性 vs 侦听器

计算属性和侦听器侧重的应用场景不同：

计算属性侧重于监听多个值的变化，最终计算并返回一个新值

侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值

使用场景：

computed 计算属性：当一个属性受多个属性影响的时候

例如：购物车商品结算，只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.

代码：

  computed:{
     // 已勾选的商品的总价
       checkedGoodsAmount(state) {
         // 先使用 filter 方法，从购物车中过滤器已勾选的商品
         // 再使用 reduce 方法，将已勾选的商品数量 * 单价之后，进行累加
         // reduce() 的返回值就是已勾选的商品的总价
         // 最后调用 toFixed(2) 方法，保留两位小数
         return state.cart.filter(x => x.goods_state)
                          .reduce((total, item) => total += item.goods_count * item.goods_price, 0)
                          .toFixed(2)
       }
}