Vue3前端 响应式数据 知识点
2024-01-09 15:25:40
一、ref(基本类型数据,也可以定义对象类型的响应式数据。此时底层用的还是reactive)
ref 创建基本类型的响应式数据
作用:定义响应式变量
语法: let xxx = ref(初始值)
返回值: 一个 RefImp1 的实例对象,简称 ref对象或ref,ref 对象的 value 属性是响应式的.
注意点:
Js 中操作数据需要:xxx.value .但模板中不需要 value,直接使用即可
对于 let name = ref(张三') 来说? ? name 不是响应式的? ? name.value 是响应式的
二、reactive(只能定义:对象类型的响应式数据)
作用:定义一个响应式对象 (基本类型不要用它,要用 ref,否则报错)
语法: let 响应式对象= reactive(源对象)。
返回值:一个 Proxy 的实例对象,
简称: 响应式对象注意点: reactive 定义的响应式数据是“深层次”的
三、ref对比 reactive
宏观角度看:
1. ref 用来定义:基本类型数据、对象类型数据
2. reactive 用来定义:对象类型数据
区别:
1.ref 创建的变量必须使用 .value (可以使用 volar 插件自动添加.value)
2.reactive 重新分配一个新对象,会失去响应式 (可以使用 object.assign 去整体替换)。
使用原则:
1.若需要一个基本类型的响应式数据,必须使用 ref
2.若需要一个响应式对象,层级不深, ref、reactive 都可以。
3.若需要一个响应式对象,且层级较深,推荐使用 reactive。
文章来源:https://blog.csdn.net/qq_42371932/article/details/135471649
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!