Vue中的计算属性和监视属性

计算属性:需要对data中的已有的属性进行处理后再显示

监视属性:需要对data中的定义的属性进行监控,变化后会通知

计算属性

1.定义:要用的元素不存在,要通过已有的属性计算得来

2.原理:底层借助了object.definepropety方法提供的getter和setter

3.get函数什么时候执行?

(1)初次读取时会执行一次

(2)当依赖的数据发生改变时会被再次读取

4.优势:与method实现相比,内部有缓存机制,效率更高,调试方便

5.备注:

1.计算属性最终会出现在vm上,直接读取使用即可

2.如果计算机属性要被修改,那必须使用set属性去响应修改,且set中要引起计算时依赖的数据发生改变

监视watch

1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在

3.监视的两种写法

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

4.属性:immediate是一个boolean类型,用来设置该属性在初始化时是否需要执行一次

5.深度监视:

(1).Vue中的watch默认不监测对象内部值的改变(一层)

(2).配置deep:true设置以后可以检测对象里边的属性值(多值)

备注:

(1).Vue 自身可以检测对象内部值的变化,但vue提供的watch默认不可以

(2).使用watch时根据数据的具体结构,决定是否采用深度监测

javascript 复制代码
//当只监测某一个深度属性时,就需要具体指定某个属性时,需要使用字符串形式包裹
//eg:"person.id"
watch:{
            person:{
                deep:true,
                handler(){
                    alert("debdhsjfbd")
                }
            }
        }
相关推荐
少卿1 分钟前
React 日历组件完全指南:从网格生成到农历转换
前端·react.js
程序员鱼皮18 分钟前
Gemini 3.0 发布!
前端·ai编程·gemini
程序员鱼皮19 分钟前
Gemini 3.0 炸裂发布!前端又死了???
前端·ai·程序员·互联网·代码
xiangxiongfly91522 分钟前
CSS svg
前端·css·svg
山依尽32 分钟前
如何将一个 React SPA 项目迁移到 Next.js 服务端渲染
前端·next.js
36 分钟前
使用 svgfmt 优化 SVG 图标
前端·svg·icon
Watermelo61737 分钟前
href 和 src 有什么区别,它们对性能有什么影响?
前端·javascript·vue.js·性能优化·html·html5·用户体验
hqk1 小时前
鸿蒙零基础语法入门:开启你的开发之旅
android·前端·harmonyos
AAA阿giao1 小时前
大厂面试之反转字符串:深入解析与实战演练
前端·javascript·数据结构·面试·职场和发展·编程技巧
The_cute_cat1 小时前
通过内网穿透为课设临时添加域名访问【springboot+Vue】
vue.js·spring boot·后端