JavaScript 中 class 语法中 Vue 组件怎么写
在 javascript 中使用 class 语法编写 vue 组件，核心做法是定义一个继承自 vue 的类，并在构造函数中初始化数据、计算属性、方法和生命周期钩子。具体而言，你需要将传统的选项式 api（如 data、computed）映射到类的属性和 getter/setter 或方法中，并通过 new myclass().$mount() 实例化并挂载组件。这样做的好处是利用了原生 es6 类的封装性，但需注意 vue 2 的响应式系统对类属性的特殊处理要求。
如何将传统选项式 API 映射到 Class 组件中
将传统选项式 API 映射到 Class 组件时，data 中的属性应直接定义为类的实例属性，methods 对应类的方法，而 computed 则需使用 getter 方法。例如，data: { count: 0 } 变为类中的 count = 0，methods: { increment() {} } 变为 increment() {}，computed: { doubleCount() {} } 变为 get doubleCount() {}。这种映射确保了 Vue 能够正确追踪依赖并更新视图。
class Counter extends Vue {
// data 映射为实例属性
count = 0;
// methods 映射为类方法
increment() {
this.count++;
}
// computed 映射为 getter
get doubleCount() {
return this.count * 2;
}
}
// 实例化并挂载
const app = new Counter();
app.$mount('#app');
Class 组件中如何处理生命周期钩子
在 Class 组件中处理生命周期钩子时，只需将传统的钩子函数名（如 mounted、created）直接定义为类的方法即可。Vue 会自动识别这些方法并在相应阶段调用它们。例如，mounted() { console.log('Component mounted'); } 可以直接写在类中，无需额外配置。这种方式保持了代码的简洁性，同时利用了类的结构优势。
class MyComponent extends Vue {
created() {
console.log('Component created');
}
mounted() {
console.log('Component mounted');
}
destroyed() {
console.log('Component destroyed');
}
}
// 注册为全局组件
Vue.component('my-component', MyComponent);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
