一、什么是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/n/237644.html
微信扫一扫 
支付宝扫一扫 