计算属性:computed
compute是一个计算属性,主要用在监听页面中变动的元素,以及要计算的地方,比如要用过单价算总价钱,以及通过两个字符串拼接成一个新的字符串,搜索框中通过输入的值来进行查询,等等。
比如在拼接字符串的时候,给了firstName.lastName.要求出fullName,一下分别对应了三种不同的操作,都可以实现拼接字符串。但是明显第一种方法是比较麻烦的,第三种方法中命名是一个值,但是写的却是一个函数,不易理解,第二种方法最符合体验,就是一个值的表达式。
computed因为内部有一个get方法,该方法返回的是一个值,所以computed即是是一个函数,到页面却是一个值得原因。
{{firstName+""+lastName}} {{fullName}} {{fullName1()}}
,
computed和methods的对比
在执行方法时,computed会保存计算出来的结果,直至这个结果被改变。所以在执行同一个操作时,该方法只会被调用一次,而methods每调用一次都会重新查询。看下图,分别执行三次computed和methods,computed只被调用了 一次,而methods被调用了三次。
computed实现原理:
computed内部有两个方法,set,get.set用于在属性改变时触发,该方法一般用不到,所以computed的主体内容就是get,用于获取计算后的结果。如下图:
在改变了fullName的时候,就会触发这个set方法。因为一般set不用,所以computed基本就是一个get属性,因此简写成了上述的模式,直接就是fullName
data为什么是函数
组件讲究的是复用性,所以各个组件的引用值必然不能相互影响。如果这里的data像父组件中的data那样直接返回一个对象,那么如果有一处调动并修改了data的值,那么所有引用这个data的地方都会受到影响,这是不合理的。因此,data是一个函数,函数里返回一个对象。
这样各个地方在调用的时候,就相当于实例化了这个对象,我们知道,实例化的对象,每个对象都不会影响到其他的对象里的值,所以这就是为什么data是一个函数。
网友评论