一、计算属性:computed
vue方便我们对数据进行计算或者处理 提供了计算属性
作用：
响应式计算数据 ：基本使用
image.png
二、侦听器
watch 侦听器允许开发者监听数据的变化，从而对数据的变化做特定的操作
Vue侦听器提供了两种语法格式。一种是方法格式的写法，另一种是对象格式的写法。
-
方法格式
image.png
缺点：
首次进入浏览器的时候，无法立即触发一次侦听器
如果侦听的是一个对象，对象里面的数据发生了变化，并不会出发
image.png -
对象格式
(推荐使用)普通用法
image.png
image.png
深度监听(deep)
一般用于监听对象， 可以深度监听到对象中的值 默认为关闭false
打开将deep设置为true
image.png
image.png
自动触发
image.png
image.png
三、ref 获取dom
在vue中可以通过ref 来操作dom
image.png
ref是vue里的方法，更加安全，不会依赖class或者id的样式变了而影响布局
vue的主要目的是减少dom的操作。减少dom节点的消耗
实战案例：
- 已知 价格 10/件 数量0
- 点击按钮让数量加1
- 计算出总价 商品价格*数量
-
当数量等于1 就让总价的字体变成 粉红色，当数量等于5 就让总价的字体颜色变成红色
image.png
注：
image.png
这里这个是变量 通过变量在vue中可以通过ref 来操作dom
渲染效果为：
image.png
