Vue中使用watch侦听器来监听数据变化的4种使用情况

最新推荐文章于 2025-02-14 10:00:32 发布

1024_Byte

最新推荐文章于 2025-02-14 10:00:32 发布

阅读量2.7k

点赞数 9

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

本文链接：https://blog.youkuaiyun.com/DDD4V/article/details/115143063

版权

vue 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了Vue.js中的计算属性和侦听器。计算属性用于处理复杂逻辑并缓存结果，减少模板中的js表达式，提高代码可维护性。而侦听器则用于监听数据变化，适合在数据变化时执行异步操作。文中通过示例代码展示了不同场景下如何使用计算属性和侦听器，包括监听简单数据、复杂数据以及深度监听对象。此外，还提到了初始化触发监听器的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识铺垫：
计算属性：computed — 数据的二次加工，降低数据的逻辑的复杂程度

作用：当模板当中使用较复杂的js表达式进行数据的转换，会造成你的模板逻辑过于复杂，不好维护，
所以用计算属性来进行转换，返回一个新的数据，便与你对数据内容进行维护

特点：在函数中也可以处理逻辑，也可以返回值，同时在模板中也可以通过调用来获得二次加工的数据

优点：计算属性有缓存，如果数据没变化，再次使用不会重新执行

场景：当你需要进行复杂逻辑的处理才需要进行计算属性的处理

侦听器：watch 作用：监听某个数据的变化

使用场景：当你在数据变化时，进行异步操作或开销较大的操作时，就需要使用监听器

如果你想监听某个数据是否进行变化时都可以使用监听器

测试代码


<template>
    <div>
        <h1> <el-button @click="count++" /> {{count}}</h1>
    </div>
</template>
<script>
export default {
  name: 'homePage',
  data () {
    return {
      count: 0
    }
  },
  watch: {
    count () {
      console.log('count变了')
    }
  }
}

也可以查看变化前和变化后的数据

情况1--简单数据：data当中的第一层数据

 watch: {
     //第一个参数是改变后的数据，第二个参数是改变前的数据
    css (newValue, oldValue) {
      console.log('css变了')
      console.log(newValue)
      console.log(oldValue)
    }
  }

情况2--复杂数据：data当中得第二层数据

data(){
    user:{
        age:10,
        name:'xxx'
    }
}
watch：{
    'user.name' () {
      console.log('user变了')
    }
}

情况3 -- 监听复杂数据类型监听对象--数据开启深度监听

watch（）{
     user：{
         handler:{
             console.log('user变了'])
         }，
         deep:true
     }
 }

情况4--监听器初始化触发

watch：{
    count：{
        handler：{
            console.log('初始化监听器')
        }，
        immediate:true
    }
}