vue-$watch属性方法

特性

https://www.cnblogs.com/widgetbox/p/8954162.html

https://segmentfault.com/a/1190000012948175?utm_source=tag-newest

1、computed特性

一个数据受多个数据影响

是计算值
应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数 //性能高

问题 (赋值)

$set(arr,1,true)

2、watch特性

一个数据影响多个 (大型开销)

是观察的动作
应用：监听props，$emit或本组件的值执行异步操作
无缓存性，页面重新渲染时值不变化也会执行

3、差异

watch可以监听对象属性
computed值set赋值时不能改变本身，只能通过改变其他的来改变本身
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 计算属性

data 属性初始化 getter setter
computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter
当首次获取 reversedMessage 计算属性的值时，Dep 开始依赖收集
在执行 message getter 方法时，如果 Dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系
当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算

巴特西

vue-$watch属性方法

特性

1、computed特性

2、watch特性

3、差异

实例

要点

Computed 的工作流程

最新文章

热门文章