Vue computed和watch的区别

computed : 计算属性

重点是得到一个数据

<template>
  <div>{{name}}</div>
<!--使用时不需要加括号-->
</template>
<script>
export default{
    data() {
        return {
            firstName: '小花',
            lastName: "王"
        }
    },
    computed: {
        name() {
            return this.firstName + '' + this.lastName
        }
    }
}
</script>

使用时不需要加括号
它会将计算的结果自动缓存
只有在依赖属性改变后才会执行

watch : 监听

重点是调用一个函数

<template>
  <div id="app">
    <div>最高分是{{highest}}</div>
    <span>作弊按钮</span>
    <button @click="add(index)" v-for="(course,index) in test" :key = "index">{{index}}加十分</button>
  </div>
</template>

<script>

export default {
    data() {
        return {
            test:{
                语文: 80,
                数学: 90,
                英语: 100
            }
        }
    },
    computed: {
        highest() {
          const {test:{语文,数学,英语}} = this
          return Math.max(语文,数学,英语)
        }
    },
   watch:{
      test:{
        handler(){
          const test = this.test
          for(let i in test){
            if(test[i] > 150){
              alert(`${i}超过最高分啦,你太贪了`)
            }
          }
        },
        immediate: true,
        deep: true
      }
   },
   methods:{
     add(index){
       this.test[index]+=10
     },
   }
};
</script>

在上面的例子中,我对test对象进行了监听,在加分超过最高分的时候批评贪心的同学
可以看到监听有两个参数:

1. immediate:是否在第一次渲染的时候执行函数
2. deep:是否要监听对象里面属性的变化

当相关数据变化了就执行回调函数
在这个例子里就是,当test对象或者test对象里的属性变化时就会执行handler