Vue3 unref詳解

一、什麼是Vue3 unref

在Vue2中我們經常使用到$refs屬性，$refs通過字元串關聯DOM元素或Vue組件實例，我們可以通過$refs屬性訪問到DOM元素或組件實例的所有屬性和方法，但是在Vue3中props、setup()和template中的所有變數都是原始的JavaScript值或響應式變數，因此從Vue3開始使用$refs來獲取組件實例時，會返回一個未解構的ref對象而不是組件實例或DOM元素。此時Vue3 unref就出現了。Vue3 unref是一個調用ref對象時返回ref.value的函數，它當參數類型為ref時，返回ref.value，否則返回參數本身。

下面是一個簡單的示例：

import { ref, reactive } from 'vue'
const a = ref(1)
const b = ref('string')
const c = reactive({
  name: 'kevin',
  age: 22
})
console.log(unref(a), unref(b), unref(c))  // 1, 'string', { name: 'kevin', age: 22 }
console.log(unref(a) === a.value)  // true
console.log(unref(b) === b.value)  // true
console.log(unref(c) === c)  // true

在上面的代碼中，我們通過unref函數獲取了ref對象所關聯的值。我們可以看到，當參數類型為ref時，unref函數返回ref.value，否則返回參數本身。通過unref函數，我們可以輕鬆獲取ref對象所關聯的值。

二、Vue3 unref的用法

1、setup()

在Vue3引入了setup()函數來代替Vue2的created()和beforeCreate()鉤子函數，並且setup()函數是必須存在的。在setup()函數中，我們可以訪問到props、context和attrs三個參數。props是一個響應式對象，裡面包含了組件的所有屬性，context是一個包含父組件傳遞給子組件方法、slot和attrs的對象，attrs是包含所有非響應式屬性的對象，但是這些屬性不具備響應式。

下面是一個使用Vue3 unref獲取props屬性的示例：

import { ref, reactive, unref } from 'vue'
export default {
  props: {
    name: String,
    age: Number
  },
  setup(props) {
    const name = unref(props.name)
    const age = unref(props.age)
    return { name, age }
  }
}

在上面的代碼中，我們通過unref函數獲取了props屬性。由於props是一個響應式對象，因此我們需要使用unref函數來獲取其關聯的值。

2、template中

在template中，我們也可以使用unref函數來獲取ref對象所關聯的值。下面是一個使用unref函數獲取ref對象在template中的示例：

 {{ message }}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/237644.html