目录
对于刚开始学习Vue的开发者来说,十分容易混淆Vue中计算属性、方法和侦听属性,希望通过本文的介绍,您能了解并分辨这三者的区别。
熟悉 Vue 的同学都知道:在Vue框架中,计算属性(computed)、方法(methods)和侦听属性(watchers)充当着非常重要的角色,它们既可以用来实现相同的功能,彼此之间又存在一些不同之处。三者都有适合自己的场景,我们要想在合适的场景下灵活运用它们,必须对它们有全面的了解。
方法(methods)
正如他的名字一样,它们是挂载在对象上的函数,通常是Vue实例本身或Vue组件。
您可以使用methods对DOM中发生的事件做出反应,也可以从组件中的其他位置调用它们,例如,从计算属性(computed)或侦听(watchers)中调用。
Methods 主要用于对常用功能进行分组,包括处理表单提交,以及构建可重用功能时,例如发出Ajax请求。
在methods
对象内部的Vue实例中创建方法如下:
new Vue({
el: "#app",
methods: {
handleSubmit() {}
}
})
当需要在模板中使用methods
时:
<div id="app">
<button @click="handleSubmit">
Submit
</button>
</div>
我们使用v-on指令将事件处理程序附加到我们的DOM元素,DOM元素也可以缩写为@
符号。
以代码中的handleSubmit
事件为例,每次单击按钮时都会调用该方法。
对于要传递方法体中需要的参数化的实例,可以执行以下操作:
<div id="app">
<button @click="handleSubmit(event)">
Submit
</button>
</div>
这里我们传递一个事件对象,例如,它允许我们在表单提交的情况下阻止浏览器的默认操作。