详解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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 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
改造一台复古桌面收音机
2021/03/02 无线电
目录,文件操作详谈―PHP
2006/11/25 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
javascript document.images实例
2008/05/27 Javascript
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
使用python实现接口的方法
2017/07/07 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
三峡导游词
2015/01/31 职场文书
2015年暑假工作总结
2015/07/13 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
React如何创建组件
2021/06/27 Javascript