Vuejs中关于computed、methods、watch的区别
来源:互联网 发布:软件用英文怎么说 编辑:程序博客网 时间:2024/06/06 03:29
最近一直在学前端Vuejs,对于新手,很是整不明白Vuejs中的computed、methods、watch的区别。
其实官方文档给的还是很清楚的,但是对于新手,还是摸不透。
地址:https://cn.vuejs.org/v2/api/#computed
1#computed:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
2#methods:methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
3#watch:是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
通俗来讲,
computed是在HTML DOM加载后马上执行的,如赋值;
而methods则必须要有一定的触发条件才能执行,如点击事件;
watch呢?它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。
所以他们的执行顺序为:默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。
下面的例子可以做为说明。
computed 属性 vs watched 属性:Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。
结合官方例子,自己做了一个demo,用户研究computed、methods、watch的区别。
先上代码块:
{{x}}---{{y}}---{{z}}--{{D}}
默认加载:
等点击按钮后,再看:(这里点了5次按钮)
以上为代码中执行的信息和顺序。
另外:在watch中,如果在函数块内给x赋值为:1000000,会出现什么情况???
我们运行一下,看看结果:
不管怎么执行,x的值始终都保持为:1000000,并且在默认加载的时候比之前多了一个watch执行信息。
希望能够让跟我一样的Vue新手有所了解computed、methods、watch的区别,希望此篇能够起到帮助作用,同时也欢迎拍砖!
- Vuejs中关于computed、methods、watch的区别
- Vuejs中关于computed、methods、watch的区别
- vue学习04--[转发]Vuejs中computed、methods、watch的区别
- vue学习05--Vuejs中computed、methods、watch的区别[2]
- vue.js2.0关于computed、methods、watch、created的区别
- methods和computed和watch的联系和区别
- vue.js中的computed和methods和watch之间的区别
- computed vs Methods vs watch
- vue中computed和watch区别
- computed 和 methods 区别
- vue2 中 computed 和 watch 的异同?
- vue中computed 和 watch的异同
- vue中watch和computed属性作用及区别
- vue computed 与 watch 区别
- vue计算属性computed和methods的区别
- 从作用机制和性质上看待methods,watch和computed的关系
- Vue.js的computed和watch用法及区别
- computed属性和watch属性的区别之二【computed的基本用法】
- R语言文本分析问题
- C++ & Java——NOIP2016提高组day 1 t1——玩具谜题
- React总结9:JSX的自动转义编码
- 高共模电压输入下交流电流信号采集方案以及问题解析
- Apple Configurator用法(MDM黑白名单实现)
- Vuejs中关于computed、methods、watch的区别
- 在Win10系统上使用VMware的Ubuntu虚拟机时,虚拟机和宿主机之间的共享文件夹设置
- 短路与&&和&的区别
- Java 依赖注入标准(JSR-330)简介
- 基于单例模式的日志输出(C++)
- iOS 设置中清除缓存功能
- 乱世纷争,还看三国
- php pack()函数详解与示例
- 关于迟滞比较器的解释(