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

最新推荐文章于 2024-07-10 11:21:49 发布

——周彤——

最新推荐文章于 2024-07-10 11:21:49 发布

阅读量1.8k

点赞数 3

分类专栏： vue 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Zt0118/article/details/127889378

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

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

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>