Vue watch的用法

最新推荐文章于 2024-10-09 17:33:17 发布

大大。

最新推荐文章于 2024-10-09 17:33:17 发布

阅读量131

点赞数

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

本文链接：https://blog.csdn.net/weixin_43923808/article/details/126485283

版权

vue相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中watch的使用，包括基本的监听数据变化、初始化执行以及深度监听。通过示例展示了如何在值改变时触发回调，如何在数据初次绑定时执行函数，以及如何深度监听对象属性。同时，提到了针对复杂数据类型的监听优化，如使用字符串形式监听特定对象属性或借助computed属性。

摘要由CSDN通过智能技术生成

Vue.js 有一个方法 watch，观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。

1.简单用法

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name(newVal, oldVal) {
      //...
    },
  },
}
</script>

当监听的参数发生变化就会执行函数，也可以在所监听的数据后面直接加字符串形式的方法名

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name: 'nameChange',
  },
  methods: {
    nameChange() {
      //...
    },
  },
}
</script>

2.初始化执行

上面的用法有个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

<template>
  <div>
    <a-input v-model="name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'zhangsan',
    }
  },
  watch: {
    name: {
      handler(newVal, oldVal) {
        // ...
      },
      immediate: true,
    },
  },
}
</script>

3.深度监听

如果需要监听比较复杂数据类型(对象)的变化时，普通的watch方法无法是监听到对象内部属性的变化，只有data中的数据才可以够监听到变化，这时就需要deep属性对对象进行深度的监听。

<template>
  <div>
    <a-input v-model="cat.name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cat: { name: 'mimi', age: 2 },
    }
  },
  watch: {
    cat: {
      handler(val) {
        // ...
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>

设置deep: true 则可以监听到cat.name的变化，此时会给cat的所有属性都加上这个监听器，如果对象属性较多时，则每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性

watch: {
  'cat.name': {
    handler(val) {
      // ...
    },
    immediate: true,
    deep: true,
  },
},

也可以借助于computed计算属性来完成

<template>
  <div>
    <a-input v-model="cat.name"></a-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cat: { name: 'mimi', age: 2 },
    }
  },
  computed: {
    newName() {
      return this.cat.name
    },
  },
  watch: {
    newName(val) {
      //...
    },
  },
}
</script>