Vue 中computed、watch和updated的区别

computed:计算属性

• 支持缓存，当依赖的数据发生变化而变化
• 在computed中变量名就是函数名，不需要在data中再定义
• 一般复杂的计算运算都考虑使用computed
• 必须用return把值返回，如果用赋值操作会形成一个死循环
• computed中的属性都拥有set和get函数，值更新时使用set

<template>
  <div class=''>
    <div>原字符串：{{message}}</div>
    <div>反转字符串：{{reversedMessage}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
}
</script>

watch:

• 数据变化时，触发响应的操作
• 属性的名称就是函数名
• 仅仅在数据发生改变的时候会被侦听到
• 只会检测到写在watch里的属性,其他没写的则不会触发

<template>
    <input type="text" v-model="name"/>
</template>

<script>
export default {
    data(){
        return{
            name:'',
        }
    },
    watch: {
        name: {
          handler(newVal,oldVal) {
          // ...
          },
          immediate: true
        }
    } 
}
</script>

updated：

• 当data中定义的数据有变化时就会加载updated方法
• 执行到它的时候是数据发生变化且界面更新完毕
• 所有的数据发生变化都会调用(消耗性能)
• 每次触发的代码都是同一个