一、computed的本质?

computed为什么不像methods一样加小括号使用?

正常使用computed方式

运行结果

至于为什么computed为什么不像methods一样使用小括号调用,是由于computed本身就是一个属性,其本质是computed内部有两个方法(set和get),computed最终的道德的结果是get方法的返回值,而set方法很少使用到,因此简化写法就是上述正常使用computed的格式,其本质写法如下展示。

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<div id="div1">
<h2>{{hobbyList}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#div1',
data: {
message: "hello vue!"
},
computed: {
hobbyList: {
set: function() { },
get: function() {
return ['baseball', 'football', 'pingpang', 'basketball']
}
}
},
});
</script> </html>

computed的本质写法

运行结果

二、computed和methods的区别?

1、methods使用时,一般情况需要加括号,而computed则不需要。

2、methods每次调用时会重新执行函数,而computed在其内部变量不变或其返回值不变的情况下多次调用只会执行一次,后续执行时直接从缓存中获取该computed的结果。

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<div id="div1">
<p>{{getName()}}</p>
<p>{{getName()}}</p>
<p>{{getName()}}</p>
<p>{{getName()}}</p> <p>{{name}}</p>
<p>{{name}}</p>
<p>{{name}}</p>
<p>{{name}}</p>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#div1',
data: {
message: "hello vue!"
},
methods: {
getName() {
console.log("methods方法被调用了")
return "kelvin"
}
},
computed: {
name() {
console.log("computed计算属性被调用了");
return "mary"
}
},
});
</script> </html>

computed存在缓存机制验证

运行结果

 运行结果说明:methods调用几次则方法执行几次,而computed只执行一次。因此推断computed存在缓存机制。

Vue中computed的本质及与methods的区别的更多相关文章

  1. vue中computed和watch的写法,以及区别

    <template> <div class="print"> <div style="color: red"> <p ...

  2. vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分

    vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

  3. Vue中computed分析

    Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...

  4. Vue中computed和watch的区别

    在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...

  5. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  6. vue中的项目目录assets和staitc的区别

    vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...

  7. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  8. Vue中computed,methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

  9. Vue中computed、methods、watch的联系和区别

    computed是计算树形,methods是方法. new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversed ...

随机推荐

  1. tab-switch 样式的添加 与 tab元素样式的切换

    要点: 1.多个div类名相同情况下添加class样式 2.siblings() 方法返回被选元素的所有同级元素.DOM 树:该方法沿着 DOM 元素的同级元素向前和向后遍历. 3.利用索引,只添加当 ...

  2. OV2640读ID全是FF问题

    最近刚好在Cyclone IV上通过LVDS把一个7寸的屏点亮,赶着热度,淘宝买了OV2640这个摄像头模块,初始化因为用Vrilog比C复杂得多,易调试性不如C,所以使用STM32初始化,模块有F3 ...

  3. LNMP zabbix 4.4

    硬件配置需求 环境 平台 CPU/内存 数据库 硬盘 监控主机数 小型 CentOS 2CPU/1GB MySQL.InnoDB 普通 100 中型 CentOS 2CPU/2GB MySQL.Inn ...

  4. thinkphp5.0使用官方验证码插件

    1.首先使用Composer下载验证码插件. 安装完成后,使用以下命令修改composer配置文件,使用国内镜像.原因你懂的. composer config -g repo.packagist co ...

  5. 171.Excel列表序号

    2020-03-17 Excel表列序号 A -> 1. B -> 2 Z -> 26 AA -> 27 ZY -> 701 示例: 输入: s = "LEET ...

  6. 痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(11.0)- FlexSPI NOR启动时间(RT1170)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RT1170 FlexSPI NOR启动时间. 痞子衡刚刚拿到i.MXRT1170 B0版本的芯片,迫不及待地在上面跑了 ...

  7. PAI-AutoLearning 图像分类使用教程

    概述 PAI AutoLearning(简称PAI AL)自动学习支持在线标注.自动模型训练.超参优化以及模型评估.在平台上只需准备少量标注数据,设置训练时长即可得到深度优化的模型.同时自动学习PAI ...

  8. springboot的坑

    No tests found for given includes:xxxx 找不到findOne()方法 可以用它的findById(id).orElse(null); 存在就会直接返回值,如果不存 ...

  9. Spring整合JDBC temple

    一.Spring对Jdbc的支持 Spring为了提供对Jdbc的支持,在Jdbc API的基础上封装了一套实现,以此建立一个 JDBC 存取框架. 作为 Spring JDBC 框架的核心, JDB ...

  10. Day8-微信小程序实战-交友小程序-首页用户列表渲染及多账号调试及其点赞功能的实现

    在这之前已经把编辑个人的所有信息的功能已经完成了 之后先对首页的列表搞动态的,之前都是写死的静态 1.之前都是把好友写死的,现在就在js里面定义一个数组,用循环来动态的绑定 在onReady中定义,取 ...