详解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 相关文章推荐
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python fabric使用笔记
2015/05/09 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python闭包思想与用法浅析
2018/12/27 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
如何提高MySql的安全性
2014/06/19 面试题
企业挂职心得体会
2014/09/10 职场文书
小班下学期个人总结
2015/02/12 职场文书
简历自我评价优缺点
2015/03/11 职场文书
防卫过当辩护词
2015/05/21 职场文书
趣味运动会标语口号
2015/12/26 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
MYSQL常用函数介绍
2022/05/05 MySQL
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript