详解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 相关文章推荐
农历与西历对照
Sep 06 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
js实现密码强度检验
Jan 15 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
在vue中实现echarts随窗体变化
Jul 27 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/12/06 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php数组使用规则分析
2015/02/27 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
python删除文件示例分享
2014/01/28 Python
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
python中adb有什么功能
2020/06/07 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
金智子午JAVA面试题
2015/09/04 面试题
师恩难忘教学反思
2014/04/27 职场文书
门店业绩提升方案
2014/06/08 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL