Vue函数实现
在Vue中实现函数可以通过多种方式，具体取决于使用场景（选项式API、组合式API或生命周期钩子）。以下是常见方法：
方法1：选项式API中的methods
在Vue 2或选项式API中，函数通常定义在methods对象中，可通过模板或组件实例调用：
export default {
methods: {
greet(name) {
return `Hello, ${name}!`;
}
}
}模板中调用：
<button @click="greet('Alice')">Greet</button>方法2：组合式API的setup
在Vue 3的组合式API中，函数直接在setup()中声明并返回：
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return { count, increment };
}
}模板调用方式与选项式API一致。
方法3：生命周期钩子函数
特定生命周期阶段执行的函数：
export default {
created() {
this.fetchData();
},
methods: {
fetchData() {
// 数据获取逻辑
}
}
}方法4：计算属性函数
对于依赖响应式数据的计算逻辑，使用computed：
export default {
data() {
return { firstName: 'John', lastName: 'Doe' };
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
}方法5：侦听器函数
响应数据变化执行函数：
export default {
data() {
return { query: '' };
},
watch: {
query(newVal) {
this.search(newVal);
}
},
methods: {
search(query) {
// 搜索逻辑
}
}
}方法6：全局函数注册
通过app.config.globalProperties注册全局函数（Vue 3）：
// main.js
app.config.globalProperties.$formatDate = (date) => {
return new Date(date).toLocaleString();
};组件内通过this.$formatDate()调用。
注意事项
- 避免在模板中直接定义复杂逻辑，应封装为函数。
- 组合式API中可使用
reactive或ref结合函数实现响应式逻辑。 - 对于复用逻辑，建议使用Composables（组合式函数）。
