Vue 响应式
2024年9月11日...大约 2 分钟
声明响应式状态
响应式状态是指当其数据发生变化时，模板中依赖该数据的部分会自动更新
- ref 用于创建一个响应式数据 (也可以用来创建对象或数组)
- reactive 用于创建一个响应式对象 (或数组)
- 用 ref 创建的响应式数据需要通过
.value来访问和修改，在模板中不需要 - reactive 创建的响应式对象可以直接访问和修改
单文件组件
<template>
<h1>{{ title }}</h1>
<p>{{ message.text1 }}</p>
<p>{{ message.text2 }}</p>
</template>
<script setup>
import { ref, reactive } from 'vue'
// ref 用于创建一个响应式数据
const title = ref('Hello Vue')
// 用 ref 创建的响应式数据需要通过 .value 来访问和修改
title.value = 'Hello Vue!'
// reactive 用于创建一个响应式对象
const message = reactive({
text1: 'Hello text1',
text2: 'Hello text2'
})
// reactive 创建的响应式对象可以直接访问和修改
message.text1 = 'Hello text1!'
message.text2 = 'Hello text2!'
</script>HTML
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{message.text1}}</p>
<p>{{message.text2}}</p>
</div>
<script type="module">
import { createApp, ref, reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
// ref 用于创建一个响应式数据
const title = ref('Hello Vue')
// 用 ref 创建的响应式数据需要通过 .value 来访问和修改
title.value = 'Hello Vue!'
// reactive 用于创建一个响应式对象
const message = reactive({
text1: 'Hello text1',
text2: 'Hello text2'
})
// reactive 创建的响应式对象可以直接访问和修改
message.text1 = 'Hello text1!'
message.text2 = 'Hello text2!'
return {
title,
message
}
}
}).mount('#app')
</script>
</body>DOM 更新时机
当修改了响应式状态时，DOM 会被自动更新。但是 DOM 更新不是同步的，Vue 会在 next tick 更新周期中缓冲所有状态的修改，以确保不管进行多少次状态修改，每个组件都只会被更新一次
若要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick()
可以传递一个回调函数作为参数，或者 await 其返回的 Promise
单文件组件
<template>
<h1>{{ count }}</h1>
<button @click="add1">按钮1</button>
<button @click="add2">按钮2</button>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const count = ref(0)
const add1 = () => {
count.value++
// 传递一个回调函数
nextTick(() => {
console.log('DOM 更新后执行某些操作')
})
}
const add2 = async () => {
count.value++
// await 其返回的 Promise
await nextTick()
console.log('此时 DOM 已经更新了')
}
</script>HTML
<body>
<div id="app">
<h1>{{count}}</h1>
<button @click="add1">按钮1</button>
<button @click="add2">按钮2</button>
</div>
<script type="module">
import { createApp, ref, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const count = ref(0)
const add1= () => {
count.value++
// 传递一个回调函数
nextTick(() => {
console.log('DOM 更新后执行某些操作')
})
}
const add2= async () => {
count.value++
// await 其返回的 Promise
await nextTick()
console.log('此时 DOM 已经更新了')
}
return {
count,
add1,
add2
}
}
}).mount('#app')
</script>
</body> Powered by Waline v3.3.2