码迷,mamicode.com
首页 > 其他好文 > 详细

监听属性watch

时间:2019-12-20 01:11:05      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:handler   under   nbsp   value   pre   strong   return   this   span   

immediate、deep

   data() {

    return {

      firstName: "刘",

      lastName: "XX",

      fullName: "",

      obj: {

        a: 1

      }

    };

  },

  watch: {

    // 最简单的监听列子

    firstName(newValue, oldValue) {

      this.fullName = this.firstName + this.lastName;

      console.log(this.fullName);

    },

    // handler、immediate。immediate:true代表如果在wacth里声明了firstName之后,就会立即先去执行里面的handler方法,即在最初绑定的时候就执行监听

    firstName: {

      handler(newValue, oldValue) {

        this.fullName = this.firstName + this.lastName;

        console.log(this.fullName);

      },

      immediate: true

    },

    // deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler

    obj: {

      handler(newValue, oldValue) {

        console.log("obj.a changed");

      },

      immediate: true,

      deep: true

    },

    // 优化

    "obj.a": {

      handler(newValue, oldValue) {

        console.log("obj.a changed");

      },

      immediate: true

    }

  },

 

注销watch

不注销会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。

监听路由

  watch: {

    $route (to, from) {

      // to表示去往的页面

      // from表示来自哪个页面

    }

  },

参考文献

https://www.cnblogs.com/yesu/p/9546458.html

监听属性watch

标签:handler   under   nbsp   value   pre   strong   return   this   span   

原文地址:https://www.cnblogs.com/Mijiujs/p/12070989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!