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

最新推荐文章于 2024-06-04 10:15:53 发布

——周彤——

最新推荐文章于 2024-06-04 10:15:53 发布

阅读量1.7k

点赞数 3

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

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

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>