【Vue3-响应式工具API】ref 和 reactive 使用

ref和reactive的区别

响应式 API：核心—ref | Vue.js (vuejs.org)

响应式 API：核心—reactive | Vue.js (vuejs.org)

Vue3第一篇之ref和reactive详解扩展

目录

ref定义任意数据类型的响应式

作用

• 定义响应式数据
• 获取模板中的DOM元素
• 获取模板中的子组件

🐉定义响应式数据

Vue 提供了一个 [ref()](https://cn.vuejs.org/api/reactivity-core.html#ref) 方法来允许我们创建可以使用任何值类型数据的响应式

• 🐸注意使用时 ，在 JS 环境 内要 .value 来使用

• ref 要定义 前 要引入

  import { ref } from 'vue';
  

<template>
  <div>
    <h1>{{hh1}}</h1>
  </div>
</template>

<script setup>
// ref 要定义 前 要引入
import { ref } from 'vue';
    
let hh1 = ref('sasa')
let hh1Obj = ref({
    sa:'sasa'
})

//在 JS 环境 内要 `.value` 来使用
console.log(hh1.value)
console.log(hh1Obj.value)
    
</script>

🐉获取模板中的DOM元素

• 使用 注意 ： ref获取元素 只能在 ❗挂载后（真实DOM） 获取才能使用

<template>
  <div>
    <h1 ref="hh1">TEST002</h1>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
// ref 要定义 成 null，变量民要与 元素  ref="hh1" 一致
let hh1 = ref(null)

onMounted(()=>{
  //只能在 挂载后获取
  console.log(hh1.value)
})
    
</script>

🐉获取模板中的子组件

• ❗注意 子组件 必须使用 defineExpose({}) 来暴露 自身的需要暴露的对象

子组件

<template>
  <div>
    <h1 ref="hh1">TEST002</h1>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';

let hh1 = ref(null)

function tets002(){
  console.log('test002 的函数')
}

function tets00201(_val){
  console.log('test002 的接受传值函数:',_val)
}
// 重要！！！
defineExpose({
  hh1,
  tets002,
  tets00201
})
</script>

父组件

<template>
  <!--获取子组件-->
  <Test002 ref="test002"/>
</template>

<script setup>
import { onMounted, ref,shallowRef } from 'vue';
import JSS from '@/utils/JSONTool.js'
import Test002 from './Test002.vue'
    
// 用ref也可以， shalldowRef 也可以（好像能节省性能）
let test002 = shallowRef(null)

onMounted(()=>{
  //调用子组件的暴露 的对象
  console.log(test002.value)
  test002.value.tets002()
  // 用 ref 实现 父子组件之间 的传值
  test002.value.tets00201('test001给的值')
})


</script>

<style scoped>

</style>

---

reactive 定义引用数据类型的响应式

作用

• 定义引用数据类型响应式数据

🐉定义引用数据类型响应式数据

• reactive 要定义 前 要引入

  import { reactive } from 'vue';
  

<template>
  <div>
    <h1>{{hh2}}</h1>
  </div>
</template>

<script setup>
// reactive 要定义 前 要引入
import { reactive } from 'vue';
    
let hh2 = reactive({
    str:'sasa'
})

//在 JS 环境 直接调用
console.log(hh2)
    
</script>

在JS环境使用时 ，可以直接使用，无需像ref一样，.value那值

---

ref 和 reactive

ref是把值类型添加一层包装，使其变成响应式的引用类型的值。

reactive 则是引用类型的值变成响应式的值。

所以两者的区别只是在于是否需要添加一层引用包装

本质上

ref(0)  --> reactive( { value:0 })

---

UN—ref 和 reactive 的赋值使用注意

reactive

ref是把值类型添加一层包装，使其变成响应式的引用类型的值。

reactive 则是引用类型的值变成响应式的值。

所以两者的区别只是在于是否需要添加一层引用包装

本质上

ref(0)  --> reactive( { value:0 })

---

UN—ref 和 reactive 的赋值使用注意