本文介绍: 要想做到上述功能需要具备两个条件 + 属性的写入和读取必须可以被拦截(被vue管理) + 属性必须在**回调函数或watch函数中被读取**,这样才能记录属性之后被
-
响应式简单理解:当一个对象的属性发生变化的时候调用一个回调函数
-
要想做到上述功能需要具备两个条件
- 属性的写入和读取必须可以被拦截(被vue管理)
- 属性必须在回调函数或watch函数中被读取,这样才能记录属性之后被写入的时候应该调用哪个函数
-
回调函数有三种,如下
- 渲染函数,即模板代码,模板代码会被编译成渲染函数。这也是为什么吗属性变化会渲染页面的原因
- 监听器:实际上是我们传递给监听器的回调函数。
- 计算属性:同监听器
-
响应实现
- 实现条件一
- data中的属性,在组件初始化的时候实现条件一
- Vue.set 方法
- vue3中的ref,reactive
- 实现条件二
- 三种函数会在组件初始化时被调用
- 三种函数在属性变化时会在此被调用
- 实现条件一
-
一些常见的响应式失效问题
- 动态的为对象添加属性
- 不满足条件1
- Vue.set方法添加的属性页面上没有效果
- 不满足条件2,虽然被vue管理了,但是没有被回调函数访问过
- vue3 watch失效
let a=reactive({b:0}) watch(a.b)
- 不满足条件1,虽然a响应式的,a.b返回了0,0并没有被vue管理
- 不满足条件2,虽然a响应式的,a.b并没有在watch的函数中被调用。
改为如下可以
let a=reactive({b:0}) watch(()=>a.b)
为什么作为函数返回值就可以?因为作为函数,会被延后调用,延后到watch函数调用的时候才调用。
- 动态的为对象添加属性
-
vue3的effectScope
- 在vue3中三种函数都会创建一个scope(域)来管理回调函数,scope和回调函数是一对多的关系。scope可以被停止,即移除条件二。
- 可以认为 watch,compute和渲染函数是一个单函数的effectScope
- scope中的回调函数会被一次一起执行完,所以把多个watch,compute和渲染函数放在一个域中,会提升效率
原文地址:https://blog.csdn.net/TheThirdMoon/article/details/135548185
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_55904.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。