zoukankan      html  css  js  c++  java
  • vue-$watch属性方法

    特性

    https://www.cnblogs.com/widgetbox/p/8954162.html
    https://segmentfault.com/a/1190000012948175?utm_source=tag-newest

    1、computed特性

    • 一个数据受多个数据影响
    1. 是计算值

    2. 应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值

    3. 具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数 //性能高

    • 问题 (赋值)
    $set(arr,1,true) 
    

    2、watch特性

    • 一个数据影响多个 (大型开销)
    1. 是观察的动作
    2. 应用:监听props,$emit或本组件的值执行异步操作
    3. 无缓存性,页面重新渲染时值不变化也会执行

    3、差异

    1. watch可以监听对象属性
    2. computed值set赋值时不能改变本身,只能通过改变其他的来改变本身
    3. computed发生渲染时读取缓存,methods渲染时重新调用,watch直接监测一个值的变化情况,不会像computed检测其中的依赖

    实例

    watch: {
        first.second(){}, //单个属性 || watch如果想要监听对象的单个属性的变化,必须用computed作为中间件转化,因为computed可以取到对应的属性值
        imgSrc: {
            handler: function(newVal, oldVal) {
            },
            deep: true,  //深度监听 || 发现对象内部值的变化
            immediate: true, //当值第一次绑定的时候,触发执行监听函数
        }
    }		
    
    computed: { //只有固定的函数,不能重新赋值 get
        fullName: {
            get(){
                return (this.row) ? this.row.type : '';
            },
            set(value){
                this.firstName = value[0];
                this.lastName = value[1];
            }
        }
    },
    

    要点

    • 监听对象时属性必须优先定义

      对象参数赋值时,当属性发生变化,必须将该属性进行定义才能监听到

    • props改变时涉及的值要改变时 尽量使用computed

    Computed 的工作流程

    1. data 属性初始化 getter setter
    2. computed 计算属性初始化,提供的函数将用作属性 vm.reversedMessage 的 getter
    3. 当首次获取 reversedMessage 计算属性的值时,Dep 开始依赖收集
    4. 在执行 message getter 方法时,如果 Dep 处于依赖收集状态,则判定 message 为 reversedMessage 的依赖,并建立依赖关系
    5. 当 message 发生变化时,根据依赖关系,触发 reverseMessage 的重新计算
  • 相关阅读:
    Linux搭建ElasticSearch环境
    从DDD开始说起
    TFS看板晨会
    TFS看板的迭代规划
    TFS看板规则
    TFS看板的设计
    Api容器在应用架构演化中的用途
    基于Abp的WebApi容器
    线程队列
    动态类型序列化
  • 原文地址:https://www.cnblogs.com/ajaemp/p/11812005.html
Copyright © 2011-2022 走看看