详解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 相关文章推荐
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
原生js实现放大镜效果
Jan 11 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP中的加密功能
2006/10/09 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
Django返回json数据用法示例
2016/09/18 Python
利用python画一颗心的方法示例
2017/01/31 Python
python实现代码统计程序
2019/09/19 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
企业投资意向书
2015/05/09 职场文书
人生遥控器观后感
2015/06/11 职场文书
财务人员入职担保书
2015/09/22 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
浅谈Redis的事件驱动模型
2022/05/30 Redis