您现在的位置是:首页 >其他 >【Vue】二:Vue核心处理---计算属性 监视属性网站首页其他

【Vue】二:Vue核心处理---计算属性 监视属性

Beyong2019 2024-07-01 11:59:40
简介【Vue】二:Vue核心处理---计算属性 监视属性

1.计算属性示例

在这里插入图片描述
在这里插入图片描述
实际上计算属性与methods中定义方法基本上没有什么区别,只是计算属性基于响应式依赖缓存,只要数据没有发生改变,计算属性从缓存中取值,只有当数据发送改变,才会重新执行函数。

计算属性的 getter 方法的调用时机:
1 第一个时机:初次访问该属性。
2 第二个时机:计算属性所依赖的数据发生变化时。

计算属性的 setter 方法的调用时机:
1 当计算属性被修改时。

只考虑读取,不考虑修改时,可以启用计算属性的简写形式。
简写:
在这里插入图片描述

2. 监听属性

watch: {
    被监听的属性名: {
        handler(newValue, oldValue) {
        }
    }
}

在这里插入图片描述
在这里插入图片描述

(1)如果想初始化的时候调用一次handler,则可以写上:immediate: true
(2)监视多级结构中某个属性的变化,写法是:‘a.b.c’ : {}。注意单引号
(3)开启深度监视,需要监视一个具有多级结构的属性,并且监视所有的属性,需要深度监视。
(4)后期添加监视

vm.$watch('被监视的属性名', {})

(5)简写
添加监视简写

watch:{ 被监视的属性名1(newVal,oldVal){}, 被监视的属性名2(newVal, oldVal){} }

后期添加的监视简写

vm.$watch('被监视的属性名', function(newVal, oldVal){})

3.补充

(1)computed和 watch 都能够完成的,优先选择 computed。
(2)如果要开启异步任务,只能选择 watch。因为 computed 依靠 return。watch 不需要依赖 return。

(3)所有 Vue 管理的函数,建议写成普通函数。
(4)所有不属于 Vue 管理的函数,例如 setTimeout 的回调函数、Promise 的回调函数、AJAX 的回调函数,建议使用箭头函数。

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。