vue中watch监听事件与计算属性的区别

BoyBoy!

已于 2023-12-27 16:41:41 修改

阅读量301

点赞数

文章标签： vue.js javascript 前端

于 2023-11-17 14:46:26 首次发布

本文链接：https://blog.csdn.net/Yyds12300/article/details/134462883

版权

本文介绍了Vue.js中watch功能的使用，包括如何在新Vue实例中配置watch，监视属性变化并执行回调，以及深度监听对象内部值的改变。还讨论了计算属性与watch的区别，特别提到异步操作在watch中的应用。

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

监视事件

在里面编写检测对象,

1.当监视的属性变化时,回调函数自动调用,进行相关的操作

2.监视的属性必须存在,才能进行监视

3.监视的两种写法：1.new Vue时传入watch配置2.通过vm.$watch('监视对象'{实现配置})
监听事件的案例

<body>
    <div class="hello">
    <title>天气案例</title>
    <h2>{{ info }}</h2>
    <button @click="change">点击切换</button>
  </div>
</body>
<script>
    const vm = new Vue ({
        el: '#root',
        data: {
            isHot: true
        },
        //计算属性
    computed: {
    info () {
      return this.isHot ? '炎热' : '凉爽'
     }
  },
  methods: {
    change () {
      this.isHot = !this.isHot
    }
  },
  watch: {
    isHot: {
      // immediate初始化让handler调用一下
         immediate: true,
      // handler当isHot发生改变时，handler发生调用。newVallue为没有调用handler的isHot值, oldVallue为调用handler后的isHot值
      handler (newVallue, oldVallue) {
        console.log('isHot被修改', newVallue, oldVallue)
      }
    }
  }
        
    })

</script>

深度监听
1.vue中watch默认不检测对象内部值的改变(一层)
2.配置deep：true可以检测对象内部值的改变(多层)
3.vue自身可以监视对象内部值的改变，但vue提供的watch默认的不可以

<body>
    <h3>{{number.a}}</h3>
    <button @click="number.a++">点我让a+1</button>
    <h3>{{number.b}}</h3>
    <button @click="number.b++">点我让b+1</button>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data: {
            number: {
                a:1,
                b:1
            }
        },
        watch: {
                //监听多级结构中某种属性的变化,加单引号才能监听a值，
                /*'number.a': {
                    handler(){
                        console.log('a被改变了')
                    }
                }
                */
                //由于vue提供的watch无法监听多级结构的所有属性，也就是无法监听number中a和b，故加上深层监听deep
                number: {
                    deep: true,
                    handler(){
                        console.log('number改变了')
                    }
                }
            }
    })

</script>

监视事件的缩写
缩写的条件仅仅只有handler方法时才可以缩写

<script>

//第一种写法
watch:{
    isHot:{
        /*原来的写法
          immediate: true,
          deep: true,
          handler(newValue,oldvalue){
            console.log('isHot被修改了，newValue,oleValue')
          }     
    }*/
    //缩写后
    isHot(newValue,oldvalue){
            console.log('isHot被修改了，newValue,oleValue')
          }     
    }*/
}
//第二次写法的缩写
/*vm.$watch('isHot',{
     immediate: true,
          deep: true,
          handler(newValue,oldvalue){
            console.log('isHot被修改了，newValue,oleValue')
          } 
})*/
//缩写后
vm.$watch('isHot',function(newValue,oldvalue){
    console.log('isHot被修改了，newValue,oleValue')
})
<script>

计算机属性computed和watch的区别
computed能完成的功能,watch也可以完成
watch能完成的功能,computed不一定能完成，如： watch的异步操作
vue管理的函数写成普通函数，不是vue管理的函数写成箭头函数，目的是都可以让this的指向都指向vm或组件的实例对象
不被vue所管理的函数有（定时器的回调函数，ajax的回调函数,promise的回调函数）

<script>
    //watch的异步操作
watch: {
	firstName(val){
	//设置定时器的回调函数，由于setTimeout()括号内的函数不是vue所管理的函数，故括号内的函数用箭头函数
		setTimeout(()=>{
			this.firName = val + this.lastName
		},1000)
	}
}
</script>