1.computed方法用法
1.1基本用法
下面图片可以看到,在import 导入中添加了一个《computed》,这就是我们需要的东西
在文本框中将 firstName和 lastName使用model 存起来
在script 中使用新方法将firstName和 lastName的值拼接为fullName
那么为什么在《全称》后面的fullName时还要添加一个括号呢?
此时是未添加括号的状态
我们可以看到,因为没有添加括号,所以导致在取值的时候,将整个fullName 方法都印在了上面
那么我们重新加上括号
这时候就可以看到,将两个文本框的值都赋了上去,也就是说,他现在不再是一个变量,而是一个变量方法,所以必须带上括号
1.2 方法特性
此时输出三个名字,看看控制台会有什么变化
我们会发现,刚刚进入页面,就输出了三条《计算属性》,这就是方法与计算属性的区别
2.computed计算属性
2.1基本用法
此时将上一个方法注释,使用第二种,尽管调用了computed方法,但是将方法的结果赋给了fullName,所以说现在的fullName是一个属性,那么在《全称》后面使用的时候,也就不需要再使用括号
这样我们也可以实现拼接输出
2.计算属性的特性
此时让页面输出三条语句,我们看看效果是怎么样的
三条语句在控制台只输出了一次,所以说在计算属性中会有缓存
3.总结
3.1 computed方法
调用时必须带上括号,因为它是一个方法
3.2 计算属性
调用时不需要括号,因为它是一个属性
3.3 两者区别
computed方法时,不会有缓存;而计算属性时,会有缓存
所以说在两者之间,使用计算属性比computed更好,因为重复使用不会多条数据