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

Posted 2023-02-22

【中文标题】布尔数据似乎在 vue 3 中的 vue 反应中表现得很奇怪

【英文标题】：Boolean data seems acting weirdly in vue's reactivity in vue 3

【发布时间】：2021-10-21 01:54:42

【问题描述】：

我正在尝试更改数据类型为 '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>

【参考方案1】：

请不要将options API 与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 中