vue 方法实现
Vue 方法实现指南
Vue.js 提供了多种方法实现方式，涵盖组件方法、生命周期钩子、计算属性和侦听器等。以下分类介绍常见实现模式。
组件方法定义
在 Vue 组件中，方法需定义在 methods 对象中。这些方法可通过模板或组件实例直接调用：
export default {
methods: {
greet() {
console.log('Hello Vue!');
},
calculateSum(a, b) {
return a + b;
}
}
}生命周期钩子使用
Vue 提供从创建到销毁的完整生命周期钩子，常用钩子包括：
export default {
created() {
// 组件实例创建后执行
},
mounted() {
// DOM 挂载完成后执行
},
beforeUnmount() {
// 组件卸载前清理
}
}计算属性实现
对于依赖其他属性的派生数据，使用 computed 可自动缓存结果：
export default {
data() {
return { count: 5 }
},
computed: {
doubledCount() {
return this.count * 2;
}
}
}侦听器配置
通过 watch 监听数据变化并执行副作用操作：
export default {
data() {
return { searchQuery: '' }
},
watch: {
searchQuery(newVal) {
this.fetchResults(newVal);
}
}
}异步方法处理
结合 async/await 处理异步操作：
export default {
methods: {
async fetchData() {
try {
const res = await axios.get('/api/data');
this.data = res.data;
} catch (error) {
console.error(error);
}
}
}
}自定义事件触发
使用 $emit 触发父组件监听的事件：
// 子组件
this.$emit('submit', payload);
// 父组件模板
<ChildComponent @submit="handleSubmit" />混入方法复用
通过 mixins 实现方法逻辑复用：
const formMixin = {
methods: {
validate() {
// 验证逻辑
}
}
}
export default {
mixins: [formMixin]
}插件全局方法
通过插件注册全局可用方法：
const plugin = {
install(app) {
app.config.globalProperties.$utils = {
formatDate(date) {
// 格式化逻辑
}
}
}
}以上模式可根据实际场景组合使用，Vue 3 的 Composition API 还提供了更灵活的函数式编程能力。
