复习Vue9：侦听器 watch

最新推荐文章于 2024-03-25 11:09:46 发布

爱发呆的程序员

最新推荐文章于 2024-03-25 11:09:46 发布

阅读量152

点赞数 1

分类专栏：笔记 Vue 文章标签： vue

本文链接：https://blog.csdn.net/tinglis/article/details/114262956

版权

笔记同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

Vue

21 篇文章 0 订阅

订阅专栏

复习Vue9：侦听器 watch

侦听器就是侦听data中数据变化，如果数据一旦发生变化就是通知侦听器所绑定方法，来执行相应的操作。从这一点上，与计算属性是非常类似的。

但是侦听器也有自己独有的应用场景。

执行一户或者开销较大的操作。

下面，我们看一下侦听器的基本使用

我们使用侦听器来统计总人数。

<p>
   
        总人数：{{totalCount}}
      </p>

在data中定义totalCount属性。

data: {
          selectItem: "",
          num: 100,
          totalCount: 0
       }

使用watch来监听users数组的数据变化。（可以查看上一章代码里面的（users））

 watch: {
          users: {
            immediate: true, //立即执行
            handler(newValue, oldValue) {
              this.totalCount = newValue.length + "个人";
            },
          },
        }

当users数组发生了变化后，就会执行handler这个函数，同时用于加上immediate属性，并且该属性值为true，表示的就是在初始化绑定的时候，也会去执行侦听器。因为watch在初始化绑定的时候是不会执行的，等到所监听的内容发生改变之后才回去侦听执行。

以上就是watch侦听器的基本使用，但是通过这个案例，我们发现还是使用计算属性来拥挤人数更加方便一些。

当然，侦听器有自己的使用场景，他的应用场景就是执行异步请求或者进行开销比较大的操作的时候，会使用侦听器。

下面我们通过一个案例，来体会一下watch侦听器的使用场景。

下面我们来看一个异步的操作情况。就是当用户在文本框中输入用户名以后，要将输入的用户名发送到服务端，来检查该用户名是否已经被占用。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>侦听器</title>
  </head>
  <body>
    <div id="app">
      <div>
        <span>用户名</span>
          <!--这里使用了lazy,保证当文本框失去焦点后，才去执行对应操作-->
        <span><input type="text" v-model.lazy="uname" /></span>
        <span>{{message}}</span>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          uname: "",
          message: "",
        },
        methods: {
          checkUserName: function (userName) {
            let that = this;
            setTimeout(function () {
              if (userName === "admin") {
                that.message = "用户名已经存在,请更改....";
              } else {
                that.message = "该用户名可以使用.....";
              }
            }, 3000);
          },
        },
        watch: {
          uname: function (value) {
            //调用后台接口，来验证用户名是被占用
            this.checkUserName(value);
            this.message = "正在校验用户名....";
          },
        },
      });
    </script>
  </body>
</html>

以上案例，就是通过watch来监听uname的值是否发生变化，如果发生了变化，就通过发送异步请求来检测uname中的值，是否已经被占用。

通过以上的案例：我们可以看到watch是允许异步操作的，并且在我们得到最终结果前，可以设置中间状态，这些动手计算属性无法做到的。

最后我们把计算属性与侦听器做一个总结，看一下他们的应用场景。

第一点:语境上的差异：

watch适合一个值发生了变化，对应的要做一些其他的事情，适合一个值影响多个值的情形。

例如，上面案例中的用户名检测，这里是一个uname发生了变化，但是这里做了很多其他的事情，例如修改message的值，发送异步请求。

而计算属性computed：一个值由其它的值得来的，其他值发生了变化，对应的值也会发生变化，适合做多个值影响一个值的情形。

例如以下代码：

computed:{
    fullName(){
        return this.firstName+' '+this.lastName
    }
}

第二点：计算属性有缓存。
由于这个特点：我们在实际的应用中，能用计算属性的，会首先考虑先使用计算属性。

第三点：侦听器选项提供了更加通用的方法，适合执行异步操作或者开销较大的操作。

爱发呆的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复习Vue9：侦听器 watch

复习Vue9：侦听器 watch侦听器就是侦听data中数据变化，如果数据一旦发生变化就是通知侦听器所绑定方法，来执行相应的操作。从这一点上，与计算属性是非常类似的。但是侦听器也有自己独有的应用场景。执行一户或者开销较大的操作。下面，我们看一下侦听器的基本使用我们使用侦听器来统计总人数。<p> 总人数：{{totalCount}} </p>在data中定义totalCount属性。data: { selectI
复制链接

扫一扫