Vue.js 为什么在我的模板中没有反应性属性？

我目前正在使用Vue.js 3中引入的新反应性API。我已经按照说明进行了操作，根据我的理解，当我用ref设置变量时，我将其转换为反应值。如果我不使用ref，则变量不是被动的，如果我更新它，则不应在模板中更新它

我对我的测试结果感到惊讶：

const app=Vue.createApp{}； app.componentmy-component{ 模板：` 数据不反应：{{countNotReactive} 数据反应：{countReactive} +1 `, 设置{ 常数countNotReactive=1； 常数countReactive=Vue.ref1； 返回{ countNotReactive， 反应性 }; }, 方法：{ 公司{ 这个.countNotReactive++； 这个.countReactive++； } } }; app.mountapp；

---

您可以在同一组件中同时使用composition和option api，但不应在这两个api之间共享方法和属性，您的逻辑应该如下所示：

常数{ createApp }=Vue； 常量应用={ } const app=createAppApp app.componentmy-component{ 模板：` 数据不反应：{{countNotReactive} 数据反应：{countReactive} +1 `, 设置{ 常数countNotReactive=1； 常数countReactive=Vue.ref1； 功能公司{ countNotReactive++； countReactive.value++； } 返回{ 股份有限公司， countNotReactive， 反应性 }; }, }; app.mount'app' VUE3应用程序

---

您可以在同一组件中同时使用composition和option api，但不应在这两个api之间共享方法和属性，您的逻辑应该如下所示：

常数{ createApp }=Vue； 常量应用={ } const app=createAppApp app.componentmy-component{ 模板：` 数据不反应：{{countNotReactive} 数据反应：{countReactive} +1 `, 设置{ 常数countNotReactive=1； 常数countReactive=Vue.ref1； 功能公司{ countNotReactive++； countReactive.value++； } 返回{ 股份有限公司， countNotReactive， 反应性 }; }, }; app.mount'app' VUE3应用程序

---

您使用的是Option API和Composition API的混合。使用选项API的method对象和其中的inc方法，可以创建两个变量

这不是被动的 这个是反应性的 这些变量在模板中获取，并覆盖从Composition API的设置方法返回的变量

只是不要将这两者混合在一起，然后像这样尝试：

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <my-component></my-component>
</div>
<script>
  const app = Vue.createApp({});
  app.component("my-component", {
    template: `
      <div>
        <ul>
          <li>Data not reactive : {{ countNotReactive }}</li>
          <li>Data reactive : {{ countReactive }}</li>
        </ul>
        <button @click="inc">+1</button>
      </div>
    `,
    setup() {
      const countNotReactive = 1;
      const countReactive = Vue.ref(1);
      
      const inc = () => {
        countNotReactive++;
        countReactive.value++;
      }

      return {
        inc,
        countNotReactive,
        countReactive
      };
    },
  });
  app.mount("#app");
</script>

---

这就是区别所在。refs值保存在其值属性中，而普通非反应变量可以直接访问。请看这里：

您使用的是Option API和Composition API的混合。使用选项API的method对象和其中的inc方法，可以创建两个变量

这不是被动的 这个是反应性的 这些变量在模板中获取，并覆盖从Composition API的设置方法返回的变量

只是不要将这两者混合在一起，然后像这样尝试：

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <my-component></my-component>
</div>
<script>
  const app = Vue.createApp({});
  app.component("my-component", {
    template: `
      <div>
        <ul>
          <li>Data not reactive : {{ countNotReactive }}</li>
          <li>Data reactive : {{ countReactive }}</li>
        </ul>
        <button @click="inc">+1</button>
      </div>
    `,
    setup() {
      const countNotReactive = 1;
      const countReactive = Vue.ref(1);
      
      const inc = () => {
        countNotReactive++;
        countReactive.value++;
      }

      return {
        inc,
        countNotReactive,
        countReactive
      };
    },
  });
  app.mount("#app");
</script>

这就是区别所在。refs值保存在其值属性中，而普通非反应变量可以直接访问。看这里：