您好,登录后才能下订单哦!
本篇文章为大家展示了Vue中computed、methods、watch三者的区别是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
Methods
在一个方法中,或多或少是您所期望的——一个对象属性的函数。您可以使用方法对发生在DOM中的事件作出反应,或者可以从组件中的其他位置调用它们,例如,从计算属性或观察者中调用它们。方法用于对公共功能进行分组-例如,处理表单提交,或构建可重用的功能,如发出Ajax请求。
在Vue实例中的methods对象内创建方法:
new Vue({ el: "#app", methods: { handleSubmit() {} } })
当您想在模板中使用它时,您可以这样做:
<div id="app"> <button @click="handleSubmit"> Submit </button> </div>
我们使用v-on指令将事件处理程序附加到dom元素,该元素也可以缩写为@符号。
现在,每次单击按钮时都会调用handleSubmit方法。对于要传递方法体中需要的参数的实例,可以执行以下操作:
<div id="app"> <button @click="handleSubmit(event)"> Submit </button> </div>
这里我们传递一个事件对象,例如,它允许我们在表单提交的情况下阻止浏览器的默认操作。
但是,当我们使用一个指令来附加事件时,我们可以使用一个修饰符来更优雅地实现相同的事情: @click.stop=“handleSubmit”
。
现在我们来看一个使用方法过滤数组中数据列表的示例。
In the demo, we want to render a list of data and a search box. The data rendered changes whenever a user enters a value in the search box. The template will look like this:
在演示中,我们要呈现一个数据列表和一个搜索框。每当用户在搜索框中输入值时,所呈现的数据都会发生更改。模板将如下所示:
<div id="app"> <h3>Language Search</h3> <div class="form-group"> <input type="text" v-model="input" @keyup="handleSearch" placeholder="Enter language" class="form-control" /> </div> <ul v-for="(item, index) in languages" class="list-group"> <li class="list-group-item" :key="item">{{ item }}</li> </ul> </div>
如您所见,我们引用的是handlesearch方法,每次用户在搜索字段中键入内容时都会调用该方法。我们需要创建方法和数据:
new Vue({ el: '#app', data() { return { input: '', languages: [] } }, methods: { handleSearch() { this.languages = [ 'JavaScript', 'Ruby', 'Scala', 'Python', 'Java', 'Kotlin', 'Elixir' ].filter(item => item.toLowerCase().includes(this.input.toLowerCase())) } }, created() { this.handleSearch() } })
handlesearch方法使用输入字段的值更新列出的项。需要注意的一点是,在methods对象中,不需要使用this.handlesearch引用该方法(正如在react中必须做的那样)
Computed Properties
虽然上面示例中的搜索可以按预期工作,但更优雅的解决方案是使用计算属性。计算属性对于从现有源组合新数据非常方便,与方法相比,它们的一大优点是缓存了输出。这意味着,如果独立于计算属性的某些内容在页面上发生更改,并且重新呈现UI,则会返回缓存的结果,并且不会重新计算计算计算属性,从而避免了可能代价高昂的操作。
计算属性使我们能够使用我们可用的数据进行即时计算。在本例中,我们有一个需要排序的项目数组。我们希望在用户在输入字段中输入值时进行排序。
我们的模板看起来几乎与前面的迭代相同,除了我们正在传递v-for指令一个计算属性(filteredlist):
<div id="app"> <h3>Language Search</h3> <div class="form-group"> <input type="text" v-model="input" placeholder="Enter language" class="form-control" /> </div> <ul v-for="(item, index) in filteredList" class="list-group"> <li class="list-group-item" :key="item">{{ item }}</li> </ul> </div>
脚本部分略有不同。我们声明了数据属性中的语言(以前这是一个空数组),而不是方法,我们将逻辑移入了计算属性:
new Vue({ el: "#app", data() { return { input: '', languages: [ "JavaScript", "Ruby", "Scala", "Python", "Java", "Kotlin", "Elixir" ] } }, computed: { filteredList() { return this.languages.filter((item) => { return item.toLowerCase().includes(this.input.toLowerCase()) }) } } })
filteredList计算属性将包含包含输入字段值的项数组。在第一次渲染时(当输入字段为空时),将渲染整个数组。当用户在字段中输入值时,filteredList将返回一个数组,其中包含输入到字段中的值。
使用计算属性时,要计算的数据必须可用,否则将导致应用程序出错
computed属性创建了一个新的filteredlist属性,这就是为什么我们可以在模板中引用它。每次依赖项执行此操作时,filteredlist的值都会更改。这里容易改变的依赖项是输入值。
最后,请注意,计算属性允许我们在模板中创建一个变量,该变量是由一个或多个数据属性构建的。一个常见的例子是从这样一个用户的名字和姓氏创建一个全名:
computed: { fullName() { return `${this.firstName} ${this.lastName}` } }
在模板中,您可以执行全名。每当名字或姓氏的值更改时,全名的值将更改。
Watchers
Watchers对于希望响应已发生的更改(例如,属性或数据属性)执行操作的情况非常有用。正如Vue文档所提到的,当您想要执行异步或昂贵的操作以响应不断变化的数据时,这是最有用的。
在搜索示例中,我们可以返回到方法示例,并为输入数据属性设置一个观察程序。然后我们可以对输入值的任何变化作出反应。
首先,让我们恢复模板以使用语言数据属性:
<div id="app"> <h3>Language Search</h3> <div class="form-group"> <input type="text" v-model="input" placeholder="Enter language" class="form-control" /> </div> <ul v-for="(item, index) in languages" class="list-group"> <li class="list-group-item" :key="item">{{ item }}</li> </ul> </div>
然后我们的Vue实例将如下所示:
new Vue({ el: "#app", data() { return { input: '', languages: [] } }, watch: { input: { handler() { this.languages = [ 'JavaScript', 'Ruby', 'Scala', 'Python', 'Java', 'Kotlin', 'Elixir' ].filter(item => item.toLowerCase().includes(this.input.toLowerCase())) }, immediate: true } } })
这里,我将观察者设置为一个对象(而不是一个函数)。这是为了我可以指定一个即时属性,它将导致观察程序在组件被装载后立即触发。这会产生填充列表的效果。然后运行的函数在handler属性中。
上述内容就是Vue中computed、methods、watch三者的区别是什么,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。