watch监听详解

关注

最新推荐文章于 2025-05-30 09:08:25 发布 · 380 阅读

原创 ·

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

localStorage存储对象，sessionStorage存储数组对象 ,cookie、localStorage和sessionStorage 区别前言最近在用angular做商城购物车的功能模块，因为angular的watch监听，数据只要发生变化就能很方便的自动渲染页面。但随即出现的问题是，之前用户操作的样式都会被重置掉。例如我勾选了几个商品准备结算，又修改了商品数量，这时候发起了请求，页面数据被渲染，打钩的商品全被恢复未选中。想着将所有选中商品的独有Id存入数组，利用localStorage存储，每次刷新都取到存储的数... 阅读详情

    <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>
————————————————