X

XiaoSong

V1

2023/01/17阅读:11主题:默认主题

响应式2(ref)

用 ref() 定义响应式变量

上一讲中,我们使用reactive()定义响应式变量,但是存在一些问题,ref()可以很好的解决这些问题。

基本使用

ref()的参数可以是任意类型的值

<script setup>
import {ref} from 'vue'
// 定义响应式变量
const number = ref(0)
// 输出一个带value属性的对象
console.log(number) // {value: 0}
console.log(number.value) // 0
</script>

ref()在模板中自动解包

ref 在模板中作为顶层属性被访问时,它们会被自动“解包”,所以不需要使用 .value

<template>
    <div>
        <!-- 直接显示 `0`,无需 `.value` -->
        {{ number }}
    </div>
</template>

ref()在响应式对象中的解包

当一个 ref 被嵌套在一个响应式对象中,作为属性被访问或更改时,它会自动解包,不需要使用 .value

const count = ref(0)
const state = reactive({
  count
})
console.log(state.count) // 0
state.count = 1
console.log(count.value) // 1

如果将一个新的 ref 赋值给一个关联了已有 ref 的属性那么它会替换掉旧的 ref

const otherCount = ref(2)
state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value) // 1

分类:

前端

标签:

Vue.js

作者介绍

X
XiaoSong
V1