vue3 之 组合式API—reactive和ref函数

• 编程语言

ref（）

作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤：

1️⃣ 从 vue 包中导入 ref 函数

2️⃣在 

 // 导入
 import { ref } from 'vue'
 // 执行函数 传入参数 变量接收
 const count = ref(0)
 const setCount = ()=>{
   // 修改数据更新视图必须加上.value
   count.value++
 }

reactive()

作用：接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤：

1️⃣ 从 vue 包中导入 reactive 函数

2️⃣ 在

在这里插入图片描述



 // 导入
 import { reactive } from 'vue'
 // 执行函数 传入参数 变量接收
 const state = reactive({
   msg:'this is msg'
 })
 const setSate = ()=>{
   // 修改数据更新视图
   state.msg = 'this is new msg'
 }



  {{ state.msg }}

总结

1️⃣ reactive和ref函数的共同作用是什么 ？

用函数调用的方式生成响应式数据

2️⃣ reactive vs ref ？

reactive不能处理简单类型的数据

ref参数类型支持更好但是必须通过.value访问修改

ref函数的内部实现依赖于reactive函数

3️⃣ 在实际工作中推荐使用哪个？

推荐使用ref函数，更加灵活

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/01e3e13c29.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐