如何在Vue中调用函数？ - vue学习-微参考

在Vue.js框架中，调用函数是执行各种操作和逻辑的基础。以下是几种在Vue中调用函数的方式。

1. 方法调用

Vue实例中的`methods`对象包含了大多数可以调用的函数。这些方法可以在模板中使用，也可以在Vue实例内部通过`this`关键字调用。

new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
}
}
});

在模板中调用该方法：

2. 计算属性调用

计算属性（computed）是基于它们的依赖进行缓存的，适合于处理较为复杂的逻辑。

new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
});

在模板中可以直接引用计算属性：

{{ fullName }}

3. 侦听器调用

Vue的`watch`选项允许你执行一个函数，当指定的数据变化时。

new Vue({
el: '#app',
data: {
question: ''
},
watch: {
question(newQuestion, oldQuestion) {
console.log('the question changed from', oldQuestion, 'to', newQuestion);
}
}
});

4. 生命周期钩子

Vue实例在创建、更新、销毁等不同阶段会触发不同的生命周期钩子。在这些钩子函数中，你可以调用其他方法。

new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
sayHello() {
console.log('Hello ' + this.message);
}
},
mounted() {
this.sayHello();
}
});

5. 自定义指令调用

在自定义指令的钩子函数中也可以调用方法。

new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
updateValue(e) {
this.message = e.target.value;
}
},
directives: {
'my-directive': {
update: function (el, binding, vnode) {
vnode.context.updateValue(); // 调用方法
}
}


}
});