详解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 (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
JQuery教学之性能优化
May 14 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
详解tween.js的使用教程
Sep 14 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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获取数组中单列值的方法
2017/06/10 PHP
Javascript之文件操作
2007/03/07 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
angular2使用简单介绍
2016/03/01 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
详解Python if-elif-else知识点
2018/06/11 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python日志模块logging基本用法分析
2018/08/23 Python
python随机数分布random测试
2018/08/27 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
反四风对照检查材料
2014/09/22 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年团委工作总结
2014/11/13 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
上诉状格式
2015/05/23 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技