一文弄清楚Vue中的computed与watch的区别

于 2023-01-06 22:21:43 发布
阅读量761 收藏 1
点赞数
文章标签： vue.js javascript 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddd2501/article/details/128585795
版权

1.实现业务

当我们点击按钮，就会切换h1标签的语句内容，再次点击按钮，h1标签的语句内容就会恢复，每次点击按钮，浏览器都会输出一个语句来表达监视到了h1的内容改变

2.Vue中的computed计算属性

2.1利用Vue中的computed计算属性实现业务

<body>
  <!-- 给一个容器 -->
  <div id="root">
    <!-- 因为info是一个计算属性，所以当Vue初次解析模板是就会输出info的返回值 -->
    <h1>今天的天气很{{info}}</h1>
    <!-- 事件绑定时：@xxx="yyy" yyy可以是一些简单的语句 -->
    <button @click="isHot = !isHot">切换天气</button>
  </div>
  <script>
    Vue.config.productionTip = false; // config是Vue的配置选项，这里表示不让vue产生额外的提示信息
    const vm = new Vue({
      el:'#root',
      data:{
        isHot: true // 作为info的变化媒介
      },
      computed:{
        info(){
          console.log('@----','isHot改变了') // 这里用于体现监听效果
          return this.isHot ? '炎热' : '凉爽'
        }
      }
    })
  </script>
</body>

上面注意一个小点，就是在事件绑定的时候，处理值可以是一些简单的执行语句，其余情况还是用方法调用的方式比较友好，上面代码等同于下面代码

<body>
  <!-- 给一个容器 -->
  <div id="root">
    <h1>今天的天气很{{info}}</h1>
    <!-- 事件绑定时：@xxx="yyy" yyy可以是一些简单的语句 -->
    <button @click="changeWeather">切换天气</button>
  </div>
  <script>
    Vue.config.productionTip = false; // config是Vue的配置选项，这里表示不让vue产生额外的提示信息
    const vm = new Vue({
      el:'#root',
      data:{
        isHot: true
      },
      methods: {
        changeWeather(){ // 将事件绑定的执行语句放到方法里面，之后再事件绑定中去调用该方法就行了
          this.isHot = !this.isHot
        }
      },
      computed:{
        info(){
          console.log('@----','isHot改变了')
          return this.isHot ? '炎热' : '凉爽'
        }
      }
    })
  </script>
</body>

2.2Vue中的computed计算属性存在的问题

问题一

例如，我现在业务又要求，我想在一秒之后去再去改变h1标签里面的内容

<body>
  <!-- 给一个容器 -->
  <div id="root">
    <h1>今天的天气很{{info}}</h1>
    <!-- 事件绑定时：@xxx="yyy" yyy可以是一些简单的语句 -->
    <button @click="changeWeather">切换天气</button>
  </div>
  <script>
    Vue.config.productionTip = false; // config是Vue的配置选项，这里表示不让vue产生额外的提示信息
    const vm = new Vue({
      el:'#root',
      data:{
        isHot: true
      },
      methods: {
        changeWeather(){
          this.isHot = !this.isHot
        }
      },
      computed:{
        info(){
          console.log('@----','isHot改变了')
          setTimeout(() => { // 给info添加一个定时器，让其一秒钟之后才会有返回值
            return this.isHot ? '炎热' : '凉爽'
          },1000)
        }
      }
    })
  </script>
</body>

你会发现，初始化的时候值就不能被展示出来，且点击按钮过了一秒之后依旧没反应，但是不报错

问题二

例如，我现在又要把业务进行扩展，我需要在监听的时候，将新值和旧值一同展示出来

<body>
  <!-- 给一个容器 -->
  <div id="root">
    <h1>今天的天气很{{info}}</h1>
    <!-- 事件绑定时：@xxx="yyy" yyy可以是一些简单的语句 -->
    <button @click="changeWeather">切换天气</button>
  </div>
  <script>
    Vue.config.productionTip = false; // config是Vue的配置选项，这里表示不让vue产生额外的提示信息
    const vm = new Vue({
      el:'#root',
      data:{ // data属性中新舔两个属性，一个是新值，一个是旧值
        isHot: true,
        newValue: '炎热',
        oldValue: '凉爽'
      },
      methods: {
        changeWeather(){
          this.isHot = !this.isHot
        }
      },
      computed:{
        info(){ // 计算属性里面进行处理，展现监听isHot变化，并且同时展示旧值、新值的效果
          console.log('@----',`今天的天气很${this.newValue},昨天天气很${this.oldValue}`);
          let passValue = this.newValue;
          this.newValue = this.oldValue;
          this.oldValue = passValue;
          return this.isHot ? passValue : this.oldValue
        }
      }
    })
  </script>
</body>

你会发现这样子做下来，代码显得很繁琐，新值和旧值还需要自己在data属性里面添加，无缘无故增加了Vue的负担

3.Vue中的watch监听属性

3.1Vue中的watch监听属性是什么？

Vue中可以使用监听器监听已有属性的变化(监听了未定义的属性也不会报错)，并根据属性的变化作出响应。

3.2Vue中的watch监听属性的基本使用方式

  • watch监听属性下可以有多个监听对象，每一个监听对象中都有一个handler函数，该函数有两个参数，第一个参数为监听对象改变前的值，第二个参数为监听对象改变后的旧值

  • 两个参数都不是必须的，需要用时用就好了

  • handler函数在监听对象发生改变时触发

<body>
  <!-- 给一个容器 -->
  <div id="root">
    <h1>今天的天气很{{info}}</h1>
    <!-- 事件绑定时：@xxx="yyy" yyy可以是一些简单的语句 -->
    <button @click="changeWeather">切换天气</button>
  </div>
  <script>
    Vue.config.productionTip = false; // config是Vue的配置选项，这里表示不让vue产生额外的提示信息
    const vm = new Vue({
      el: '#root',
      data: {
        isHot: true,
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        }
      },
      computed:{
        info(){
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      watch: {
        info:{ // info就是需要监听的对象
          handler(newValue,oldValue){
            console.log('@----',`今天的天气很${newValue},昨天的天气很${oldValue}`)
          }
        }
      }
    })
  </script>
</body>

我们仔细观察上面的动态图片会发现，我们点击按钮之前，浏览器的日志输出是空的，说明Vue没有在一开始的时候就去解析watch监听属性(有别于computed计算属性)

注意：

当我们给监听对像添加立即执行的额外配置(immediate:true)时，我们就会发现Vue会在一开始就去解析watch监听属性

watch: {
  info:{ // info就是需要监听的对象
    immediate:true,
    handler(newValue,oldValue){
      console.log('@----',`今天的天气很${newValue},昨天的天气很${oldValue}`)
    }
  }
}

我们可以看到，当给监听对象加上立即执行的额外配置(immediate:true)时，浏览器的日志输出在一开始就会有输出内容，也就是说Vue会在一开始就去解析watch监听属性，但是你会发现此时的oldValue值为undefined

3.3watch监听的深度监听

如果需要深度监听，必须给监听对象额外进行允许深度监听的配置(deep:true)，该配置可以让Vue的负担减轻，因为不是每一个监听对象都需要进行深度监听，当我们需要深度监听的时候，我们手动配置就好了

未给watch配置深度监听
给watch配置了深度监听 
<script>
    Vue.config.productionTip = false; // config是Vue的配置选项，这里表示不让vue产生额外的提示信息
    const vm = new Vue({
      el: '#root',
      data: {
        obj: { // 用于深度监听测试
          a : {
            b : {
              c : {
                d: 20
              }
            }
          }
        }
      },
      watch: {
        obj:{
          deep:true, // 这是watch监听属性能深度监听属性的关键
          handler(){
            console.log('@----','obj发生了改变');
          }
        }
      }
    })
  </script>

给watch配置了深度监听

3.4Vue中的监听属性另外的写法

语法格式 
vm.$watch(监听对象,回调函数) // 监听对象需要打引号，回调函数包含两个参数
利用该语法实现业务 
<body>
  <!-- 给一个容器 -->
  <div id="root">
    <h1>今天的天气很{{info}}</h1>
    <!-- 事件绑定时：@xxx="yyy" yyy可以是一些简单的语句 -->
    <button @click="changeWeather">改变天气</button>
  </div>
  <script>
    Vue.config.productionTip = false; // config是Vue的配置选项，这里表示不让vue产生额外的提示信息
    const vm = new Vue({
      el: '#root',
      data: {
        isHot:true
      },
      methods: {
        changeWeather(){
          this.isHot = !this.isHot
        }
      },
      computed: {
        info(){
          return this.isHot ? '炎热' : '凉爽'
        }
      }
    })
    vm.$watch('info',function(newValue,oldValue){
      console.log(`今天的天气很${newValue},昨天的天气很${oldValue}`)
    })
  </script>
</body>

3.5Vue中的watch监听属性的简写方式

当我们不需要给watch的监听对象进行额外配置时，我们才可以使用watch的简写形式，简写形式相当于就是将监听对象和handler函数融为一起了

不是简写形式 
watch: {
  info:{ // info就是需要监听的对象
    handler(newValue,oldValue){
      console.log('@----',`今天的天气很${newValue},昨天的天气很${oldValue}`)
    }
  }
}
简写形式 
watch: {
  info(newValue,oldValue){
    console.log('@----',`今天的天气很${newValue},昨天的天气很${oldValue}`)
  }
}

3.6利用Vue中的watch监听属性来实现业务

<body>
  <!-- 给一个容器 -->
  <div id="root">
    <h1>今天的天气很{{info}}</h1>
    <!-- 事件绑定时：@xxx="yyy" yyy可以是一些简单的语句 -->
    <button @click="changeWeather">切换天气</button>
  </div>
  <script>
    Vue.config.productionTip = false; // config是Vue的配置选项，这里表示不让vue产生额外的提示信息
    const vm = new Vue({
      el: '#root',
      data: {
        isHot: true,
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        }
      },
      computed:{
        info(){
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      watch: {
        info:{ // info就是需要监听的对象
          handler(newValue,oldValue){ 
            setTimeout(() => { // 过一秒钟之后才会提示监听信息，完成了异步任务
              console.log('@----',`今天的天气很${newValue},昨天的天气很${oldValue}`) // 很容易拿到新值、旧值
            },1000)
          }
        }
      }
    })
  </script>
</body>

当我们观察上面现象就可以发现，利用Vue的watch监听属性可以很好的处理异步任务，并且很简单那的就能拿到新值、旧值，这两点也很好的解决了刚才使用Vue的computed计算属性去完成业务所出现的问题

注意：

上面使用定时函数setTimeout的时候，我们使用的是箭头函数，为什么这个时候使用箭头函数？因为如果是普通函数，那么JS认定setTimeout函数就是Window调用的，所以setTimeout中的this会指向Window，而如果用箭头函数，那么箭头函数是没有自己的this的，所以这个时候的this指向handler函数的this，所以在Vue中，我们定义函数时一定要考虑清楚this的指向问题

4.总结

  • computed能完成的功能，watch都可以完成

  • watch能完成的功能，computed不一定能够完成，例如：watch可以进行异步操作

  • 被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

  • 所以不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm 或 组件实例对象

执迷原理
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue中computed和watch区别
小陈的博客
10-30 1万+
watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
Vue中computed及watch区别实例解析
10-15
在Vue.js框架中，`computed`和`watch`都是用于处理数据变化的机制，但它们在功能和使用场景上存在显著的区别。以下是关于这两个概念的详细解析。 **计算属性（Computed）** 计算属性`computed`主要用于创建基于现有...
Vue中computed和watch的区别
zq爱生活爱代码的博客
03-13 255
计算属性computed : 1. 支持缓存，只有依赖数据发生改变，才会重新进行计算 2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化 3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是...
vue的computed和watch的区别
热门推荐
weixin_44063225的博客
07-06 1万+
computed和watch都是vue框架中用于监听数据变化的属性
vue中computed与watch的区别
元仙僧的博客
07-02 280
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。 watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。 <div>{{Name}}</div> data...
Vue computed 和watch 的区别
weixin_41436338的博客
04-09 297
computed和watch的相同点：        当依赖数据发生改变的时候，自动触发对应的方法。computed和watch的不同点：computed是计算属性：就是和data 里面数据属性一样的使用方式，不用当成函数来调用。擅长处理的场景：一个数据受多个数据的影响。 例如当firstName发生改变的时候就会触发fullName ，fullName调用不用当成函数那样用（）,&lt;inpu...
vue中watch和computed的区别与使用方法
10-14
在 Vue 中，`watch` 和 `computed` 都是用来处理数据变化的机制，但它们之间存在显著的差异和特定的使用场景。 **计算属性（Computed）** 计算属性是基于它们的响应式依赖进行缓存的。这意味着，当你在模板中使用一...
详解vue中computed 和 watch的异同
08-30
在 Vue 中，computed 和 watch 是两个非常重要的概念，它们都可以用来观察页面的数据变化，但是它们之间有着很大的区别。 首先，computed 是一个计算属性，它可以根据依赖项自动更新。例如，在上面的例子中，我们...
Vue中computed、methods与watch的区别总结
10-17
主要给大家介绍了关于Vue中computed、methods与watch区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue中computed和watch的区别
qq_46472106的博客
10-20 146
computed computed也就是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护。 在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值 watch watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。 computed和watch的使用场景并不一样，computed的话是通过几个数据的变化，来影响一个数据，而watch，则是可以一个数
Vue的computed和watch的细节全面分析
weixin_33810006的博客
01-23 663
1.computed 1.1 定义 是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return...
Vue中的computed和watch的区别
青年码农
12-04 433
Vue项目开发中，有这么两个属性比较容易混淆，如果不特别注意，用法比较相似，这两个属性就是computed和watch，其实这两个还是有很大差别，下面就讲讲这两个属性的用法及不同先说说为什么比较像，我们看下面代码。<template> <div> <inputtype="text"v-model="a"/> &...
vue中computed和watch有什么区别
曹豆芽
03-21 222
vue中computed和watch有什么区别? computed: computed是计算属性,也就是计算值,它更多用于计算值的场景 computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算 computed适用于计算比较消耗性能的计算场景 watch: 更多的是「观察...
vue中computed和watch的区别是什么？
前端杂文
03-24 234
vue中computed和watch的区别是什么？
vue中computed和watch区别
最新发布
03-17
Vue中的computed和watch都可以用来监听数据的变化，但它们的用途和实现方式是不同的。 computed是基于缓存的，它只有在相关依赖的数据发生变化时才会重新计算。而watch是在监听的数据发生变化时立即执行回调函数。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执迷原理

感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值