转载于:https://segmentfault.com/a/1190000014478664?utm_source=tag-newest
1.computed区别于method的两个核心
在官方文档中,强调了computed区别于method最重要的两点
- computed是属性调用,而methods是函数调用
- computed带有缓存功能,而methods不是
OK,下面我们看一个具体的例子
<!--HTML部分-->
<div id="app">
<h1>{{message}}</h1>
<p class="test1">{{methodTest}}</p>
<p class="test2-1">{{methodTest()}}</p>
<p class="test2-2">{{methodTest()}}</p>
<p class="test2-3">{{methodTest()}}</p>
<p class="test3-1">{{computedTest}}</p>
<p class="test3-2">{{computedTest}}</p>
</div> <!--script部分-->
let vm = new Vue({
el: '#app',
data: {
message: '我是消息,'
},
methods: {
methodTest() {
return this.message + '现在我用的是methods'
}
},
computed: {
computedTest() {
return this.message + '现在我用的是computed'
}
}
})
2. computed的属性调用
细心的朋友可能已经发现了,在HTML
的插值里
- computed定义的方法我们是以属性访问的形式调用的,
{{computedTest}}
- 但是methods定义的方法,我们必须要加上
()
来调用,如{{methodTest()}}
,否则,视图会出现test1
的情况,见下如3 - function boundFn (a) { var l = arguments.length; return l ? l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a) : fn.call(ctx) }
3. computed的缓存功能
首先,我们要明白缓存究竟有什么用?
相比大家都知道HTTP缓存
,其核心作用就是对一些服务端未更新的资源进行复用,避免一些无谓的请求,优化了用户的体验
对于computed也是一样的:
在上面的例子中,methods
定义的方法是以函数调用的形式来访问的,那么test2-1,test2-2,test2-3
是反复地将methodTest
方法运行了三遍,如果我们碰到一个场景,需要1000个methodTest的返回值
,那么毫无疑问,这势必造成大量的浪费
更恐怖的是,如果你更改了message的值,那么这1000个methodTest
方法每一个又会重新计算。。。。
所以,官方文档才反复强调对于任何复杂逻辑,你都应当使用计算属性
computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值
如上例,在Vue实例化的时候,computed定义computedTest方法会做一次计算,返回一个值,在随后的代码编写中,只要computedTest方法
依赖的message数据
不发生改变,computedTest方法
是不会重新计算的,也就是说test3-1,test3-2
是直接拿到了返回值,而非是computedTest方法重新计算的结果。
这样的好处也是显而易见的,同样的,如果我们碰到一个场景,需要1000个computedTest的返回值
,那么毫无疑问,这相对于methods
而言,将大大地节约内存
哪怕你改变了message的值,computedTest
也只会计算一次而已
4. computed的其它说明
- computed其实是既可以当做属性访问也可以当做方法访问
- computed的由来有一个重要原因,就是防止文本插值中逻辑过重,导致不易维护
Vue中computed与method的区别的更多相关文章
-
Vue中computed和watch的区别
在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...
-
vue中computed和watch的区别,以及适用场景
computed:通过属性计算而得来的属性 1.computed内部的函数在调用时不加(). 2.computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当 ...
-
vue的computed和method的区别
(1)computed是响应式的,methods并非响应式. (2)computed是带缓存的 (3)computed中的成员可以只定义一个函数作为只读属性,也可以定义get/set变成可读写属性,这 ...
-
Vue中 computed 和 methods的区别
涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...
-
vue中computed(计算属性)和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
-
vue中assets和static的区别
Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要 ...
-
Vue中computed分析
Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
-
vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...
-
Vue.js中 computed 和 methods 的区别
官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...
随机推荐
-
Bestcoder#5 1002
Bestcoder#5 1002 Poor MitsuiTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
-
学习_单片机/嵌入式_的资源链接。——Arvin
---恢复内容开始--- +单片机 -郭天祥的51单片机入门视频(链接: https://pan.baidu.com/s/1sl3xNDr 密码: 1zik) -51单片机20元购买资料公开(链接: ...
-
Ubuntu 15.10下droidbox安装使用
DroidBox是一个动态分析Android代码的的分析工具.其目前的安装环境为:Linux/Unix/MacOSX 下面是安装步骤 一. 安装Android SDK 并添加环境变量 export P ...
-
Eclipse 高亮显示选中的相同变量
问题描述: 在 eclipse 中使用快捷键或其他原因,不小心按错了,使得变量的高亮显示没了. 1.网友解决方法: 选择:windows-> preferences->java-> ...
-
ubuntun安装ssh,并远程链接服务器操作
SSH是一种以安全.加密方式连接远程主机或服务器的方法.SSH服务器接受从有SSH的客户机的连接,允许操作者象在本地一样地登录系统.你可以用SSH从远程运行shell和X程序. (1)安装SSH服务器 ...
-
onvif规范的实现:成功实现ONVIF协议RTSP-Video-Stream与OnvifDeviceManager的视频对接
有了前几篇的基础,现在可以正式开始onvif的实现工作,其中一项非常重要的部分就是视频流的对接,即能够在符合onvif标准的监控客户端软件里接收到设备端NVT发来的RTSP视频流.这里,我所用的客户端 ...
-
关于访问MSMQ远端私有队列的一点经验
这里应该将私有队列称做"专用队列"好像更贴切一些了,O(∩_∩)O 可以访问远程主机的MSMQ的私有队列的,这个是毋庸置疑的,但需要说明的是不能通过代码创建私有队列,关于这一点,我 ...
-
Netty中的连接管理
连接管理是我们首先需要关注的,检测空闲连接以及超时对于及时释放资源来说是至关重要的.由于这是一项常见的任务,Netty特地为它提供了几个ChannelHandler实现. 用于空闲连接以及超时的Cha ...
-
安装sqlprompt
特别说明:注册机会报毒,安装前请先关闭杀毒软件!下载好附件之后解压,打开SQLPrompt_7.2.0.241.exe按照提示安装完成.安装完成后断网!打开数据库,会在菜单栏中看到SQL Prompt ...
-
python and or的理解规则
>>> 'a' and 'b' 'b' >>> '' and 'b' '' >>> 'a' and 'b' and 'c' 'c’ 解释:在布尔上 ...