布尔数据在 vue 3 中的 vue 反应性中似乎表现得很奇怪

Question

我试图改变一个变量，有一个数据类型'boolean'。当页面第一次加载时，数据工作正常。但是，当页面被重新加载时，变量在方法中被局部更新，而不是在全局数据节中更新。因此，在控制台中，我不断收到一个错误"Uncaught (in promise) TypeError: Cannot read property 'value' of undefined at invokeDirectiveHook"

我错过了什么吗?

<template>
<p>Value: {{ val }}</p>
<button @click="changeMe">Click Me</button>
</template>
<script>
import { ref } from 'vue';
export default {
data() {
return {
val: ref(false);
},
},
methods: {
changeMe() {
this.val = !this.val;
}
}
}
</script>

Answer 1

请不要把选项API和合成API混在一起

<

选项API/h3>

Vue.createApp({
data() {
return {
val: false
}
},
methods: {
changeMe() {
this.val = !this.val
}
}
}).mount('#demo')

<script src="https://unpkg.com/vue@next"></script>
<div id="demo" class="demo">
<p>Value: {{ val }}</p>
<button @click="changeMe">Click Me</button>
</div>

<

构成API/h3>

const { createApp, ref } = Vue;
const app = createApp({
setup() {
let val = ref(false)

function changeMe() {
val.value = !val.value
}
return {
val,
changeMe
}
}
});
app.mount("#app");

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<p>Value: {{ val }}</p>
<button @click="changeMe">Click Me</button>
</div>

composition API (short)

// Composition API
<template>
<p>Value: {{ val }}</p>
<button @click="changeMe">Click Me</button>
</template>
<script setup>
import { ref } from 'vue'
const val = ref(false)
function changeMe() {
val.value = !val.value
}
</script>

<script setup>现在包含在3.2版本