一、计算属性:computed

vue方便我们对数据进行计算或者处理 提供了计算属性
作用：
响应式计算数据 ：基本使用

image.png

二、侦听器

watch 侦听器允许开发者监听数据的变化，从而对数据的变化做特定的操作
Vue侦听器提供了两种语法格式。一种是方法格式的写法，另一种是对象格式的写法。

1. 方法格式

   
   
   image.png
   
   

   缺点：
   首次进入浏览器的时候，无法立即触发一次侦听器
   如果侦听的是一个对象，对象里面的数据发生了变化，并不会出发

   
   
   image.png

2. 对象格式
   (推荐使用)普通用法

   
   
   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