zoukankan      html  css  js  c++  java
  • vue中监控某个属性的变化

    1.深度监控,监测所有属性的变化

    watch:{
        obj:{
            handler(newVal,oldVal){
    
            },
            deep:true
        }
    
    }

    2.监测某个属性的变化:

    watch:{
        'obj.a':{
            handler(newVal,oldVal){
    
            }
        },
        '$route.path'(newVal,oldVal){
            //监听路由的变化
        }
    
    }

    3.计算属性

    computed:{
        a1(){
            return this.obj.a;
        }
    }

    4.watch与computed的区别?

    作用:两者都可以用来监听属性的变化。

    computed:根据其他依赖的属性,来形成新的属性;

    watch:用来监听data或props属性中数据的变化,从而触发相关操作;

     

    区别:

    computed:

    1、是基于data中声明过或父组件传递的props中的数据计算得到的;

    2、computed结果会被缓存,只有当依赖的数据发生变化才会重新计算;

    3、不支持异步,当computed内有异步操作时无效,无法监听数据的变化;

    4、computed中的属性有get和set方法,但是默认走get方法。

    watch:

    1、watch监听的数据必须是data中声明过或父组件传递的props中的数据;

    2、watch不会被缓存,当监听的数据变化时,直接出发响应的操作。

    3、支持异步

    4、watch方法中有两个属性:immediate(组件加载立即触发方法),deep(深度监听)

    5、使用场景:需要执行异步操作,或者开销较大的操作。

  • 相关阅读:
    H5学习的第三周
    2017.3.12 H5学习的第一周
    js中比较实用的函数用法
    JS学习中遇到的一些题目
    H5学习第四周
    idea快捷键
    中国国内可用API合集
    ssm整合 idea+maven版
    Dubbo的使用及原理浅析
    $.extend 和$.fn.extend的区别
  • 原文地址:https://www.cnblogs.com/annie211/p/12654113.html
Copyright © 2011-2022 走看看