Mountvue3onclassattributes

在Vue 3中，我们可以使用“setup”函数代替Vue 2中的“data”和“mounted”属性。以下是一个示例代码，演示如何在类属性中使用Vue 3：

import { reactive, createApp } from 'vue';

class MyComponent {
  constructor() {
    const app = createApp(this);
    
    app.setup(() => {
      const state = reactive({ count: 0 });
      
      return { state };
    });
    
    app.mount('#app');
  }
  
  render() {
    return `
      <div>
        <p>Count: {{ state.count }}</p>
        <button @click="state.count++">Increment</button>
      </div>
    `;
  }
}

new MyComponent();

上述代码中，“setup”函数用于定义组件的状态，而“reactive”用于创建响应式对象。在该示例中，我们创建了一个名为“state”的响应式对象，并将其返回为属性。在“render”方法中，我们使用模板字符串来显示状态和按钮，当按钮被单击时，我们递增计数器的值。最后，我们使用“createApp”和“mount”函数将组件挂载到HTML页面中的元素“#app”上。