vue 方法实现
在 Vue 中实现方法通常涉及组件内定义方法、生命周期钩子、计算属性等。以下是常见实现方式：
组件内方法定义
在 Vue 组件的 methods 选项中定义方法，可通过 this 访问组件实例：
export default {
methods: {
greet() {
console.log('Hello Vue!');
},
calculateSum(a, b) {
return a + b;
}
}
}生命周期钩子方法
Vue 提供特定生命周期阶段自动调用的方法：
export default {
created() {
// 组件实例创建后调用
},
mounted() {
// DOM 挂载完成后调用
}
}计算属性
对于需要复杂逻辑处理的属性，使用 computed：
export default {
data() {
return { count: 0 }
},
computed: {
doubleCount() {
return this.count * 2;
}
}
}监听器
通过 watch 监听数据变化：
export default {
data() {
return { message: '' }
},
watch: {
message(newVal, oldVal) {
console.log('Message changed:', newVal);
}
}
}事件处理
模板中直接绑定事件处理方法：
<button @click="handleClick">Click</button>对应方法定义：
methods: {
handleClick(event) {
console.log('Button clicked', event);
}
}异步方法处理
结合 async/await 处理异步操作：
methods: {
async fetchData() {
try {
const response = await axios.get('/api/data');
this.data = response.data;
} catch (error) {
console.error(error);
}
}
}全局方法注册
通过 Vue.prototype 添加全局可用方法：
Vue.prototype.$formatDate = function(date) {
return new Date(date).toLocaleString();
}Mixins 复用方法
通过 mixins 实现方法复用：
const myMixin = {
methods: {
sharedMethod() {
console.log('Reusable method');
}
}
}
export default {
mixins: [myMixin]
}
