Vue中computed、methods与watch的区别总结


Posted in Javascript onApril 10, 2019

前言

对于那些开始学习Vue的人来说,对于方法、计算属性和观察者之间的区别有点混淆。

尽管通常可以使用它们中的每一个来完成或多或少相同的事情,但了解每个人在哪里胜过其他人还是很重要的。

在这个快速提示中,我们将了解Vue应用程序的这三个重要方面及其用例。我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点。

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">
 <h2>Language Search</h2>

 <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">
 <h2>Language Search</h2>

 <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">
 <h2>Language Search</h2>

 <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为您提供了构建伟大应用程序所需的超级能力。知道何时使用它们是构建用户喜爱的内容的关键。方法、计算属性和观察者是您可用的超级能力的一部分。往前走,一定要好好利用它们!

原文地址:https://www.sitepoint.com/the-difference-between-computed-properties-methods-and-watchers-in-vue/添加链接描述

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 #Javascript
详解vue-cli3 中跨域解决方案
Apr 10 #Javascript
js中数组常用方法总结(推荐)
Apr 09 #Javascript
JS隐藏号码中间4位代码实例
Apr 09 #Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 #Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 #Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 #Javascript
You might like
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
js实现防止被iframe的方法
2015/07/03 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
js模块加载方式浅析
2017/08/12 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
python矩阵转换为一维数组的实例
2018/06/05 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
骨干教师培训感言
2014/01/16 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
信息工作经验交流材料
2014/05/28 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
党员个人年度总结
2015/02/14 职场文书
免职通知
2015/04/23 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Mysql 如何查询时间段交集
2021/06/08 MySQL