使用 Vue + TypeScript 时,可以通过引入
ref
和reactive
来实现响应式的数据处理。
ref
ref
用于将基本数据类型(如字符串、数字、布尔类型等)转换为可响应式的对象。使用示例如下:
import { ref } from 'vue'
const count = ref(0)
此时的count
就是一个可响应式的对象,它有以下属性:
value
: 存储了基本数据类型的值的属性,类似于普通变量readonly value
: 只读的属性,不能对其进行修改
在模板中使用时,需要对value
属性进行访问,示例如下:
<template>
<div>
<p>Count: {{ count.value }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}
</script>
reactive
reactive
用于将复杂的对象转换为可响应式的对象,使用示例如下:
import { reactive } from 'vue'
const state = reactive({
count: 0,
message: 'Hello, world!'
})
此时的state
就是一个可响应式的对象,它包含了两个属性:count
和message
,这两个属性都是可响应式的。
在模板中使用时,可以直接访问state
对象及其属性,示例如下:
<template>
<div>
<p>Count: {{ state.count }}</p>
<p>Message: {{ state.message }}</p>
<button @click="increment">Increment</button>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script lang="ts">
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
message: 'Hello, world!'
})
const increment = () => {
state.count++
}
const updateMessage = () => {
state.message = 'Hello, Vue + TypeScript!'
}
return {
state,
increment,
updateMessage
}
}
}
</script>
需要注意的是,在使用reactive
时,如果需要在函数组件中修改对象的属性,需要使用readonly
或readonly ref
来声明该属性。这样可以确保属性是只读的,但是还是能够被响应式地更新。
评论区