Vue3中的ref详解

1. ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

<template>
  <div>
    <p>Count: {
    
    {
    
     count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import {
    
     ref } from 'vue';
const count = ref(0);

function increment() {
    
    
  count.value++;
}
</script>

使用 ref 获取 DOM节点，需要放在 onMounted 生命周期内使用

<template>
  <div ref="myDiv">Hello, World!</div>
</template>

<script setup>
import {
    
     ref, onMounted } from 'vue';
const myDiv = ref(null);

onMounted(() => {
    
    
  const textContent = myDiv.value.textContent;
  console.log(textContent);
});
</script>

2. shallowRef

创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的（浅层响应式）

它的监听只能到 value，更深层次的就不可以，所以修改其属性是非响应式的这样是不会改变的

<script setup >
import {
    
     shallowRef } from 'vue'
 const message = shallowRef('Hello, Vue 3!')
 // 修改 message 的值不会触发视图的重新渲染
 message.value = 'Hello, Vue 3!'

 // 但是，如果 message 的子对象发生变化，视图会重新渲染
 message.value = {
    
     text: 'Hello, Vue 3!' }
</script>

但是它和 ref 一起用会受 ref 的影响 shallowRef 的也会改变。

原因是 调用 ref 时， 它的底层会调用 triggerRef 强制更新页面DOM，所以 shallowRef 声明的值也会跟着一起改变。

3. triggerRef

强制更新页面DOM

<template>
  <div>
    <button @click="changeMsg">change</button>
    <div>{
    
    {
    
     message }}</div>
  </div>
</template>
 
<script setup>
import {
    
     shallowRef,triggerRef } from 'vue'

let message = shallowRef({
    
    
  name: "张三"
})
 
const changeMsg = () => {
    
    
  message.value.name = '李四'
  // 强制更新页面DOM
  triggerRef(message)
}
</script>