详解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中的查找parents与closest方法之间的区别
Dec 02 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
react-native动态切换tab组件的方法
Jul 07 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
npm ci命令的基本使用方法
Sep 20 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
在PHP的图形函数中显示汉字
2006/10/09 PHP
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
layui导航栏实现代码
2017/05/19 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
Web技术实现移动监测的介绍
2017/09/18 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python3实现飞机大战
2020/11/29 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
大学生标准自荐书
2014/06/15 职场文书
实习计划书范文
2015/01/16 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
退休教师追悼词
2015/06/23 职场文书
运动会班级前导词
2015/07/20 职场文书
七夕情人节问候语
2015/11/11 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL