ref和reactive的区别

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

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

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

文章目录

ref和reactive的区别
目录
@[toc]

`ref`定义任意数据类型的响应式
🐉定义响应式数据
🐉获取模板中的DOM元素
🐉获取模板中的子组件

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

ref 和 reactive
UN---ref 和 reactive 的赋值使用注意
UN---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那值