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

  • <template>
      <div ref="target">123</div>
    </template>
    scripte
    import {ref} from 'vue'
    setup(){
       const target=ref(null)   
       return {target} 
       target.value就是相应dom   
    }
    
    
    

• 获取组件实例对象

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

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

  • 用法和获取dom一样的

    • <template>
        <组件标签 ref="target">123</组件标签>
      </template>
      script
      import {ref} from 'vue'
      setup(){
         const target=ref(null)   
         return {target} 
         target.value就是组件实例对象
      }