typescript - 为什么普通常量在 Composition API (Vue 3) 中仍然有效？

Question

如官方文档所述，在新的组合 APIsetup方法中定义我们的“数据”变量时，我们必须使用reforreactive以便让 Vue 跟踪该特定变量的任何变化。

我正在试验反应性，我发现了一个奇怪的行为。以这个组件这个组件作为参考：

应用程序.vue

<template>
  <div id="app">
    <p>{{ awesomeState.txt }}</p>
    <p>{{ myConst }}</p>
    <button @click="operate">Test it</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import awesomeStore from "@/AwesomeStore";

export default defineComponent({
  setup() {
    const awesomeState = awesomeStore.getState();
    const myConst = "I'm a const"; // This should be const `myConst = ref('...');`
    return {
      awesomeState,
      myConst
    };
  },
  name: "App",
  methods: {
    operate() {
      this.myConst = 'Why this updates?';
      awesomeStore.changeText("yess!");
    }
  }
});
</script>

AwesomeStore.ts

import { reactive, readonly, watch } from "vue";

export abstract class Store<T extends Record<string, any>> {
  protected state: T;

  constructor() {
    const data = this.data();
    this.state = reactive(data) as T;
    watch(() => this.state, (value) => {
      console.log(value); debugger;
    }, {deep: true});
  }

  protected abstract data(): T;

  public getState(): T {
    return readonly(this.state) as T;
  }
}

interface Test extends Object {
  txt: string;
}

class AwesomeClass extends Store<Test> {
  protected data(): Test {
    return {
      txt: "init"
    };
  }
  public changeText(msg: string) {
    this.state.txt = msg;
  }
}

export default new AwesomeClass();

当我单击按钮时，属性myConst会更新。除了我不应该在 边界之外定义方法setup()，我不明白为什么会发生这种情况。

任何人都可以得到提示吗？

提前致谢，

更新

我忘了提，只有当我尝试修改常量和方法时才会发生暴露的行为awesomeStore.changeText：

operate() {
      this.myConst = 'Why this updates?';
      //awesomeStore.changeText("yess!"); <-- If commented, myConst do not update.
    }

标签： typescriptvue.jsvuejs3

Answer 1

这里发生了两件事使它起作用

1）您使用的是方法而不是传递函数

您可以使用标准的 Vue APIdata:, methods:,etc...或组合 API，即：setup()

您的示例同时使用两者。AFAIK，这样做是可以的，但是请注意，通过setup vs传递的方法methods会表现不同。在方法中，您将可以访问可变this对象myConst

  methods: {
    operate() {
      this.myConst = 'Why this updates?'; // <=== access to mutable variable in `this` 
      awesomeStore.changeText("yess!");
    }
  }

如果您要使用此示例（如下），则更新myConst将不起作用

setup(){
  const myConst = "I'm a const"; // This should be const `myConst = ref('...');`
  // ...stuff...
  return {
    awesomeState,
    myConst,
    operate: ()=>{
      this.myConst = 'Why this updates?'; // <=== nope
      myConst = 'Why this updates?';      // <=== also nope
      awesomeStore.changeText("yess!");
    }
  }
}

2）您正在更新 ref 和 static

另一个问题是您正在更新静态值，然后是 ref。更改 ref 将重新触发渲染，此时静态值将发生更改

因此，如果您通过商店删除更新，您应该不会再看到更新发生

  methods: {
    operate() {
      this.myConst = 'Why this updates?';
      // awesomeStore.changeText("yess!"); // <== no ref change, no update
    }
  }

这是一个测试我的“理论”的游乐场

const {
  createApp,
  ref,
} = Vue

createApp({
  el: '#app',
  setup() {
    let mystatic = 1
    const myref = ref(1)
    return {
      mystatic,
      myref,
      updateStatic: () => {
        mystatic++
      },
      updateRef: () => {
        myref.value++
      }
    }

  },
  methods: {
    updateStaticMethod() {
      this.mystatic++
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>

<div id="app">
  <li>Static: {{ mystatic }}</li>
  <li>Ref: {{ myref }}</li>
  <li><button @click="updateStatic">Static+</button> will not change. ever.</li>
  <li><button @click="updateStaticMethod">Static+(method)</button> will not update unless triggered elswhere</li>
  <li><button @click="updateRef">Ref+</button>update ref value (and force redraw)</li>
  <li><button @click="()=>{updateStaticMethod();updateRef();}">Both++</button> update both</li>
</div>