vue监听 watch

风继续吹&

于 2021-06-02 08:58:35 发布

阅读量96

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_48930299/article/details/117459264

版权

vue.js 专栏收录该内容

28 篇文章

订阅专栏

博客围绕Vue.js展开，但具体内容缺失。Vue.js是前端开发常用框架，能助力构建高效、交互性强的Web应用。

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

<template>
  <div>
    {{ i }}
    <button @click="i++">+</button>

    <div>
      {{ stu.age }}
      <button @click="addage">+</button>
    </div>

    <hr>
   
    <button @click="add2">数组+</button>

    <button @click="stu.a.b.c++">++</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      i: 0,
      stu: {
        name: "bob",
        age: 0,
        a:{
            b:{
                c:1
            }
        }
      },
      list:[
          {
              a:1
          }
      ]
    };
  },
  watch: {
    i(v1, v2) {
      console.log(v1, v2);
    },

    stu: {
      handler(obj) {
        console.log("stu改变了", obj);
      },
      deep: true, //深度监听
    },

    list:{
        handler(obj){
            console.log('数组改变了',obj)
        },
        deep:true
    }
  },
  methods: {
    addage() {
      this.stu.age++
      console.log(this.stu.age)
    },
    add2(){
        this.list[0].a++
        console.log(this.list[0].a)
    },
  },
};
</script>

<style>
</style>