详解vue 计算属性与方法跟侦听器区别(面试考点)


Posted in Javascript onApril 23, 2018

计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<div id="example">
 {{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。

基础例子

<div id="app">
 {{fullName}}
</div>
  
  
var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28
 },
 // 计算属性
 computed: {
   fullName: function () {
     console.log("计算了一次")
     return this.firstName + " " + this.lastName
   }
 }
})

结果:

王小智

然后我们通过浏览器改变age属性的值,让页面重新渲染:

详解vue 计算属性与方法跟侦听器区别(面试考点)

大家可以看到,我们改变了age值计算属性的方法没有被调用,那如果计算属性的值发生了改变,如lastName或者firstName改变,打印结果又会怎么样呢?

详解vue 计算属性与方法跟侦听器区别(面试考点)

大家可以看到,当他依赖的发生变化的时候,计算属性会重新计算一次。

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:

<p>Reversed message: "{{ fullName() }}"</p>


// 在组件中
methods: {
 fullName: function () {
  console.log("计算了一次")
  return this.firstName + " " + this.lastName;
 }
}

结果:

王小智

同样参照上面,我们通过浏览器改变age属性的值,让页面重新渲染:

详解vue 计算属性与方法跟侦听器区别(面试考点)

可以看出,我们页面只要重新渲染,方法都会执行一次,而计算属性只有在它的相关依赖发生改变时才会重新求值。

我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

计算属性 vs 侦听属性

你可能已经注意到我们还可以通过侦听属性达到同样的效果:

var vm = new Vue({
 el: '#app',
 data: {
  firstName: "王",
  lastName: "小智",
  age: 28,
  fullName
 },
 // 计算属性
 watch: {
   firstName: function () {
    console.log("计算了一次");
    this.fullNmae = this.firstName + this.lastName;
   },
   lastName: function () {
    console.log("计算了一次")
    this.fullNmae = this.firstName + this.lastName;
   }
 }
})

结果:

王小智

同样参照上面,我们通过浏览器改变age属性的值,让页面重新渲染:

详解vue 计算属性与方法跟侦听器区别(面试考点)

大家可以看到,和fullname不相关的改变,fullName没有变化,跟计算属性类似,会有缓存,只有在它的相关依赖发生改变时才会重新求值,将它与计算属性的版本进行比较,好得多了,不是吗?

当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过
AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 #Javascript
Node.js应用设置安全的沙箱环境
Apr 23 #Javascript
vue-devtools的安装步骤
Apr 23 #Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 #Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 #Javascript
原生JS进行前后端同构
Apr 22 #Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
python 实现插入排序算法
2012/06/05 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
手写一个python迭代器过程详解
2019/08/27 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
说明书怎么写
2014/05/06 职场文书
委托书的格式
2014/08/01 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
行政撤诉申请书
2015/05/18 职场文书
值班管理制度范本
2015/08/06 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers