vue-$watch属性方法

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

特性

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 的工作流程

  • https://segmentfault.com/a/1190000010408657 - 深入理解 Vue Computed 计算属性

  1. data 属性初始化 getter setter

  2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter

  3. 当首次获取 reversedMessage 计算属性的值时，Dep 开始依赖收集

  4. 在执行 message getter 方法时，如果 Dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系

  5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算

以上是 vue-$watch属性方法 的全部内容， 来源链接： utcz.com/z/380826.html

回到顶部