小编Scu*_*ket的帖子

观察者的正确 Vue 3 语法是什么？文档中似乎省略了它。我对这里看到的新功能感到非常兴奋： https://vuejs.org/guide/essentials/watchers.html#deep-watchers 但是预期的语法是什么？

我无法让访问同一商店的多个组件响应更新，直到我弄乱 dom 元素来触发新的渲染。

在我的 Pinia 商店中，我有一个数组和一个更新方法：

    let MyArray: IMyItem[] = [
    { id: 1,
      name: "First Item",
    }, ....
    let SelectedItem = MyArray[0]
    const AddItem = ( n: string, ) => {       
        MyArray.push({ id: createId(), name: n, });
        };

    return { MyArray, SelectedItem, AddItem  }

在一个 Vue 组件中，我有文本输入和一个用于调用商店方法的按钮：

    function handle() {store.AddItem(name.value));

在另一个 Vue 组件中，在同一个父组件上，我使用 for 循环来显示允许选择项目：

    <div v-for="item in store.MyArray">
          <input type="radio"...

这些努力没有改变：

    const { MyArray } = storeToRefs(store);
    const myArray = reactive(store.MyArray);
    // also watching from both components...
    watch(store.MyArray, …

每个全局注册的组件在标记中都有一个红色的打字稿花体！该应用程序仍然运行，就像没有错误一样！

• 它发生在所有组件、定制组件和第三方库上。

• 如果我将它们直接导入到 vue 文件中，它不会抛出错误。

注册组件的无聊示例

//main.ts
import MyComponent from "./components/MyComponent.vue";
_app.component(MyComponent,  "my-component");

无聊的使用

//SomeView.vue
< script setup lang="ts>
import OtherComp from "./components"
</script>

<template>
  <div>

    <my-component> 
      <!-- Red Squiggles! -->
    </my-component> 

    <OtherComp> 
      <!-- no error on local import-->
    </OtherComp> 

  </div>
</template>

到底他妈发生了什么？我是否不小心更新了 typescript 或 Volar 或 linter 之类的东西？这是一个假错误，对吗？当然是丑了