vue监听事件

Nikki_u

已于 2022-03-10 17:02:39 修改

阅读量7k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2022-03-10 16:13:54 首次发布

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/123403412

本文详细介绍了在Vue.js中如何使用watch监听数据变化，包括监听简单事件、复杂事件以及数组的变化，通过深度监听和直接监听对象属性的方法，实现对组件状态的响应式更新，并展示了设置点击事件改变内容的实践。

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

一、准备数据和样式

<template>
  <div>
    {{ name }}
    <br>
    {{obj.age}}
    <br>
    {{arr}}
    <button @click="fn">点击</button>
  </div>
</template>

  data() {
    return {
      name: "zs",
      obj:{
        age:18,
        gender:'女'
      },
      arr:[1,2,4]
    }
  },

name(newVal){
  console.log('监听到了' + newVal);
},

方法一：深度监听

obj:{
  deep:true,//深度监听
  immediate:true,//立即监听
  handler(newVal){
    console.log('监听到了' +newVal.age);
  }
},

方法二：直接监听对象里的属性

'obj.age'(newVal){
  console.log('监听到了' +newVal);
},

方法一：深度监听

    arr:{
      deep:true,
      handler(newVal){
        console.log('监听到了' +newVal);
      }
    }

方法二：直接监听对象里的属性

    'arr.push(9)'(newVal){
      console.log('监听到了' +newVal);
    },

  methods: {
    fn() {
      this.name = "ls";
      this.obj.age=80
      this.arr.push(9)//数组监听方法不能用
    },
  },