watch监听数据（进页面立马监听，监听对象，监听表单中的某一项）

最新推荐文章于 2023-08-27 11:32:40 发布

原创最新推荐文章于 2023-08-27 11:32:40 发布 · 2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文详细介绍了Vue.js中`watch`的使用，包括基础的字段监听，如何在组件加载时立即触发监听器（immediate），以及如何深度监听对象属性的变化（deep）。通过示例代码展示了监听单个字段、整个对象以及对象内特定属性的方法，帮助开发者更好地理解和应用Vue的响应式机制。

1.基础监听（监听一个字段）

<template>
  <h1>{{userName }}</h1>
  <input type="text" v-model="userName" />
</template>

<script>
export default {
  name: "Watch",
  data() {
    return {
         userName: "ll"
    };
  },
   watch:{
     userName(newVal,oldVal){
       console.log(newVal,oldVal);
     },
   },
  methods: {},
};
</script>

<style scoped>
</style>

2.刚一进页面就监听（immediate）

<template>
  <h1>{{userName }}</h1>
  <input type="text" v-model="userName" />
</template>

<script>
export default {
  name: "Watch",
  data() {
    return {
         userName: "ll"
    };
  },
  watch:{
    userName:{
      handler(newVal,oldVal){
      console.log(newVal,oldVal);
      },
    immediate:true
    },
  methods: {},
};
</script>

<style scoped>
</style>

3.如果监听对象（deep）

<template>
  <h1>{{ obj.userName }}</h1>
  <input type="text" v-model="obj.userName" />
</template>

<script>
export default {
  name: "Watch",
  data() {
    return {
      obj: {
        userName: "ll",
        age:20
      },
    };
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {},
};
</script>

<style scoped>
</style>

4.只监听对象中的某一项

<template>
  <h1>{{ obj.userName }}</h1>
  <input type="text" v-model="obj.userName" />
</template>

<script>
export default {
  name: "Watch",
  data() {
    return {
      obj: {
        userName: "ll",
        age:20
      },
    };
  },
  watch: {
    'obj.userName': {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      immediate: true,
    },
  },
  methods: {},
};
</script>

<style scoped>
</style>

标签

#前端 #javascript #html