vue中computed、metfods、watch的区别
一、computed和methods
我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式确实是相同的。
不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要计算依赖的值还没有发生改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method ,只要发生重新渲染,method 调用总会执行该函数。
当有一个性能开销比较大的的计算属性 A ,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ,这时候,我们就需要缓存!
但是,缓存也有自己的缺点:
也同样意味着下面的计算属性将不再更新,因为 Date.now()
不是响应式依赖:
computed: {
now: function () {
return Date.now()
}
}
so:数据量大,需要缓存的时候用computed;每次确实需要重新加载,不需要缓存时用methods
二、computed和watch
computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性,而不是命令是的watch回调。 computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。
这里我直接引用vue官网的例子来说明:
html:
我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化
<div id="myDiv">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fullName">
</div>
js: 用watch方法来实现
new Vue({
el: '#myDiv',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
js: 利用computed 来写
new Vue({
el:"#myDiv",
data:{
firstName:"Den",
lastName:"wang", },
computed:{
fullName:function(){
return this.firstName + " " +this.lastName;
}
}
})
so:尽量用computed计算属性来监视数据的变化,因为它本身就这个特性,用watch没有computed“自动”,手动设置使代码变复杂。
vue中computed、metfods、watch的区别的更多相关文章
- Vue中computed和watch的区别
在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...
- vue中computed/method/watch的区别
摘要:本文通过官方文档结合源码来分析computed/method/watch的区别. Tips:本文分析的源码版本是v2.6.11,文章中牵涉到vue响应式系统原理部分,如果不是很了解,建议先阅读上 ...
- Vue中computed与method的区别
转载于:https://segmentfault.com/a/1190000014478664?utm_source=tag-newest 1.computed区别于method的两个核心 在官方文档 ...
- vue中computed和watch的区别,以及适用场景
computed:通过属性计算而得来的属性 1.computed内部的函数在调用时不加(). 2.computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当 ...
- 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模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...
随机推荐
- mysql8操作命令(持续更新)
mysql服务管理 查看服务状态 systemctl status mysqld.service 启动服务 systemctl start mysqld.service 关闭服务 systemctl ...
- .babelrc和babel.config.js的相同配置不能合并
项目内部已经有了babel的配置文件babel.config.js module.exports = { presets: ["@vue/app"], }; 然后由于要按需引入el ...
- main函数的的两个参数
C语言中main函数的参数有两个,这两个参数写为argc和argv.因此,main函数的函数头可写为:main(argc,argv);C语言还规定argc(第一个形参)必须是整型变量,argv( 第二 ...
- WARN PageNotFound:208 - Request method 'POST' not supported
在地址栏输入网址访问页面 ,用的是GET方法. 在用ajax接收后台数据,根据返回值进行提示或页面跳转时报:WARN PageNotFound:208 - Request method 'POST' ...
- 机器学习总结(二)bagging与随机森林
一:Bagging与随机森林 与Boosting族算法不同的是,Bagging和随机森林的个体学习器之间不存在强的依赖关系,可同时生成并行化的方法. Bagging算法 bagging的算法过程如下: ...
- 51nod1363 最小公倍数之和
题目描述 给出一个n,求1-n这n个数,同n的最小公倍数的和. 例如:n = 6,1,2,3,4,5,6 同6的最小公倍数分别为6,6,6,12,30,6,加在一起 = 66. 由于结果很大,输出Mo ...
- docker容器的时间同步
好久没写博客了,有时间开始陆续整理一下工作中遇到的问题,今天罗列一下docker容器的时间同步问题 我们每次在run容器的时候,会存在时区不同的问题,这样对数据处理会有很大障碍,操作如下: 第一种方式 ...
- CocosCreator 小知识
最近在自学creator,有些小坑和解决方案,想记录下来: 1. 防止点击穿透 场景:在游戏界面有功能按钮,上层弹出layer之后,加入了遮罩,但是游戏界面的功能按钮还可以点击,穿透了! 方案1:遮罩 ...
- mysql用户管理和pymysql模块
一:mysql用户管理 mysql是一个tcp的服务器,用于操作服务器上的文件数据,接收用户端发送的指令,而接收指令时就 需要考虑安全问题. 在mysql自带的数据库中有4个表是用于用户管理的,分别是 ...
- 蚂蚁金服ATEC城市峰会上海举行,三大发布迎接金融科技2019
2019年1月4日,蚂蚁金服ATEC城市峰会以“数字金融新原力(The New Force of Digital Finance)”为主题在上海举办.稠州银行副行长程杰.蚂蚁金服副总裁刘伟光.蚂蚁金服 ...