本篇文章给大家分享的内容是关于对vue的模板语法,计算属性以及侦听器的分析。有需要的朋友可以参考一下。
模板语法、计算属性和侦听器
目标：
1、熟练使用vue的模板语法
2、理解计算属性与侦听器的用法以及应用场景
立即学习“前端免费学习笔记（深入）”；
1. 模板语法
first: {{firstName}}
last: {{lastName}}
{{firstName + ' ' + lastName}}123
![对Vue的模板语法,计算属性,侦听器的分析]()
2. 计算属性(computed)
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
计算属性和方法时不一样, 计算属性是基于他们的依赖,进行缓存, 当计算属性的相关变量发生变化才会重新进行计算, 否则都是直接从缓存中读取之前的计算结果.(这样可以降低性能的消耗)
计算属性有getter和setter, 可以分别定义其设值和取值时会执行的函数.
3. 侦听器(watch)
如果我们只需要侦听一个数据,或者要在一个数据变化的时候执行一些操作(去改动多个数据),而且这些改动可能和这个数据没有依赖关系, 那么就可以使用侦听器了.
侦听器,可以侦听一个数据的变化,然后执行相应的操作.
4. 使用场景
1.watch擅长处理的场景：一个数据影响多个数据 (一个变化)
2.computed擅长处理的场景：一个数据受多个数据影响 (多个变化,最终返回一个数据)
3.method相对普通,需要主动去触发,还可能会让代码变得复杂,而且如果像以上这些场景的话,使用method会有更大的性能消耗.
相关推荐：
