computed和 watch 使用案例如图:

一、computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理.

用法: 计算属性默认的简写,只能读取访问,不能修改,修改需要写完整写法

1,简单写法:

`computed: {
  计算属性名() {
    处理逻辑...
    return 结果
  }
}`

2,完整写法:

`computed: {
  变量名: {
    get() {
      处理逻辑...
      return 结果
    }
    set(value) { // value---需要处理的值
      处理逻辑...
    }
  }
}`

使用(购物车全选反选)

computed: {
    allCheck: {
      get() {
        let checked = this.fruitsList.every(item=>item.isChecked)
        return checked
      },
      set(value){
        this.fruitsList.forEach(item=>item.isChecked=value)
      }
    },
 }

二、watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。

用法:

1,简单写法---监视简单类型的变化

 `watch:{
  数据属性名(newValue,  oldValue) {
    处理逻辑...
  },
  '对象.属性名'(newValue,  oldValue) {
    处理逻辑...
  }
}`

2、完整写法--添加额外的配置项(深度监视复杂类型,立即执行)

`watch:{
  数据属性名: {
    deep: true, // 深度监视(针对复杂类型)
    immediate: true, // 是否立即执行一次handler
    handler(newValue) {
      处理逻辑...
    }
  }
}`

使用(将数据持续化到本地)

const defaultArr =[...] // 在全局设置一个默认的列表数据
data() {
    return {
      fruitsList: JSON.parse(localStorage.getItem('list')) || defaultArr
    }
},
watch:{
    fruitsList: {
      deep: true,
      handler(newValue) {
        localStorage.setItem('list', JSON.stringify(newValue))
      }
    }
}