Vue 3装饰器类组件属性是否响应式？是否需使用ref？

不是必须使用ref关键字，在vue-facing-decorator的类式组件里，有多种方式可以实现响应式，下面给你拆解问题并给出替代方案：

为什么你原来的代码不生效？ #

你代码里的title是普通的类属性，Vue 3的响应式系统基于Proxy实现，不会自动将类的普通属性包装成响应式对象。哪怕你修正代码里的错误（普通属性没有.value，应该直接写this.title = "Demo clicked"），修改后视图也不会更新，因为这个属性本身不具备响应式能力。而添加ref后，title被包装成了响应式的ref对象，修改它的.value属性才会触发视图更新。

不用ref的响应式实现方式 #

• 使用@State装饰器（vue-facing-decorator提供的装饰器）：
  用@State()标记类属性，它会自动把属性转换为响应式的，不需要手动用ref包装，直接修改属性值即可触发更新：

  <script lang="ts">
  import { Component, Vue, toNative, State } from 'vue-facing-decorator'
  
  @Component
  class Demo extends Vue {
      @State() title = "Demo Page"
      clickedbtn = () => {
          this.title = "Demo clicked"
      }
  }
  export default toNative(Demo)
  </script>
  <template>
      <h2>{{ title }}</h2>
      <button v-on:click="clickedbtn">button</button>
  </template>
  

• 使用reactive包装对象：
  如果组件有多个响应式属性，可以把它们放到一个reactive对象里，修改对象的属性即可触发响应式：

  <script lang="ts">
  import { Component, Vue, toNative, reactive } from 'vue-facing-decorator'
  
  @Component
  class Demo extends Vue {
      state = reactive({
          title: "Demo Page"
      })
      clickedbtn = () => {
          this.state.title = "Demo clicked"
      }
  }
  export default toNative(Demo)
  </script>
  <template>
      <h2>{{ state.title }}</h2>
      <button v-on:click="clickedbtn">button</button>
  </template>
  

总结 #

ref只是实现响应式的其中一种方式，并非类式组件的唯一选择。你可以根据属性的数量和使用场景，选择@State装饰器或者reactive来实现响应式。

内容的提问来源于stack exchange，提问作者buddhi chamalka