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

Question

我正在尝试更改数据类型为 'boolean' 的变量。首次加载页面时，数据运行良好。但是，当页面重新加载时，变量在方法中局部更新，而不是在全局数据部分中。因此在控制台中，我不断收到错误 "Uncaught (in promise) TypeError: Cannot read 属性 '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

请不要混淆 options API with the composition API

选项API

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

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>

作文API（短篇）

// 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 version

中

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

Boolean data seems acting weirdly in vue's reactivity in vue 3

javascript

runtime-error

vue.js

vue-reactivity

vuejs3

选项API

作文API

作文API（短篇）