vue计算属性 getter/setter

首先看下下面这段代码
在页面上显示图书名字和图书价格

image.png
运行结果
image.png
如果这时我们要在图书价格前面加上美元 或者人民币
可以这样写
image.png
直接在模板前面加上修饰符 实现下
使用methods里面定义方法 返回图书价格
image.png
image.png
模板里面调用时要加上小括号 表示执行这个方法 否则返回的是一个函数本身
下面了解下什么是计算属性
vue里面支持computed写法
所谓的计算属性是指在模板显示的时候 进行计算 并且依赖某一个值
看下面例子
image.png
模板显示时候 不需要加小括号 当成一个属性使用即可
image.png
这是methods和computed的一个区别
二者还有一个重要的区别
如果计算属性依赖的属性值没有发生改变 计算属性不会重新计算值，只有依赖的值发生了变化 ，才会进行重新计算
看下下面例子
image.png
首先在methods方法里面和计算属性里面分别在控制台打印了各自的内容
然后在模板里面引入多个图书价格
image.png
首先我们调用的是methods中的方法
看下控制台输出
image.png
我们改成计算属性的调用的方式
image.png
控制台输出
image.png
可以看见只执行了一次
计算属性可以对属性值(图书价格)进行缓存 如果值没变 则不重新计算
写上计算属性后
image.png
这里的bookPrice相当于java里面的getter和setter
下面看下计算属性的完整写法
image.png
其中get(){}这种和 get:function(){}写法等价
是javascript里面对象里面写函数的简写形式
完整写法相当于java的getter和setter函数
只不过可以简写成上面的形式
相当于只有getter省略了set函数
这时当我们修改bookPrice属性值时 会调用set函数，同时get函数值也会发生改变
我们在页面里面加一个按钮 修改bookPrice计算属性值
image.png
同时同步模板里面的图书价格值
运行结果
image.png
点击按钮后
image.png
可以发现同步了试图
以上就是使用计算属性的便利，通过它可以对我们的模板简洁性和可维护性更进一步的提高