基本使用
ref 函数,可以把简单数据类型包裹为响应式数据(复杂类型也可以),注意 JS 中操作值的时候,需要加 .value
属性,模板中正常使用即可。
<template>
<div class="container">
<div>{
{ name }}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
const name = ref('ifer')
const updateName = () => {
name.value = 'xxx'
}
return { name, updateName }
}
}
</script>
包装复杂数据类型
注意:ref 其实也可以包裹复杂数据类型为响应式数据,一般对于数据类型未确定的情况下推荐使用 ref,例如后端返回的数据。
<template>
<div class="container">
<div>{
{ data?.name }}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
// 初始值是 null
const data = ref(null)
setTimeout(() => {
// 右边的对象可能是后端返回的
data.value = {
name: 'ifer'
}
}, 1000)
const updateName = () => {
data.value.name = 'xxx'
}
return { data, updateName }
}
}
</script>