Vue3中reactive函数、toRef函数和ref函数有什么用

这篇文章给大家分享的是有关Vue3中reactive函数、toRef函数和ref函数有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

reactive函数

reactive用于定义响应式数据（可以理解 成data的替代品）

用法：

导入 import {reactive} from 'vue'

使用：

const state=reactive({    参数名:参数值})

访问： state.参数名

访问： state.参数名

toRef函数(了解即可)

toRef：将响应式数据中某个字段提取出来成单独响应式数据

用法：

导入 import {toRef} from 'vue'

使用：

const state=reactive({    num:0})const num=toRef(state（响应式数据）,'num属性名')num:{    value:0}Ref实际可以理解成一种数据类型：{value:值}

访问：num.value===0

注意点：

html：中使用响应式数据时可以不用写value

js中一定要写value

ref函数

定义响应式数据

{    value:值}

直接定义使用

导入import {ref} from 'vue'setup(){定义    const num=ref({a:1,b:2})      num:{       value:{a:1,b:2}    }}

访问： num.value===0

reactive:适用于多个数据，ref适用于单个数据

获取dom

scripteimport {ref} from 'vue'setup(){   const target=ref(null)      return {target}    target.value就是相应dom   }

获取组件实例对象

ref用于原生标签就是获取dom

ref用于组件标签就是获取组件实例对象

用法和获取dom一样的

scriptimport {ref} from 'vue'setup(){   const target=ref(null)      return {target}    target.value就是组件实例对象}

感谢各位的阅读！关于"Vue3中reactive函数、toRef函数和ref函数有什么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！