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

可以发现同步了试图
以上就是使用计算属性的便利，通过它可以对我们的模板简洁性和可维护性更进一步的提高