vue中methods、computed与watch的区别

1. computed：计算属性，基于他们的响应式依赖进行缓存，只有相关的依赖发生改变时，才会重新进行计算；对于任何复杂的逻辑，或者对数据进行处理。
2. methods：给vue定义方法，只要发生重新渲染，methods调用总是会被执行
3. watch：侦听器，主要用于观察和监听页面上的vue实例的变化；如果数据变化的同时进行异步操作，或者比较大的开销时使用

<template>
  <div class="ComputedAndMethodsAndWatch">
    <p>{
    
    {
    
     message }}</p>
    <p>{
    
    {
    
     reverseMessage }}</p>
    <p>{
    
    {
    
     reverseMessage }}</p>
    <p>{
    
    {
    
     reverseMsg() }}</p>
    <p>{
    
    {
    
     reverseMsg() }}</p>
    <p>年龄{
    
    {
    
     age }}</p>
    <button @click="ageAdd">增加年龄</button>
  </div>
</template>

<script>
export default {
    
    
  name: "ComputedAndMethodsAndWatch",
  data() {
    
    
    return {
    
    
      message: "hello",
      age: 18
    }
  },
  mounted() {
    
    
  },
  computed: {
    
    
    reverseMessage: function () {
    
    
      console.log("1");//只执行了1次
      return this.message.split("").reverse().join("");
    }
  },
  methods: {
    
    
    reverseMsg() {
    
    
      console.log("2");//初始渲染的时候执行了2次这个方法
      return this.message.split("").reverse().join("");
    },
    //增加年龄
    ageAdd() {
    
    
      this.age++;
    }
  },
  watch: {
    
    
    age: function (newValue, oldValue) {
    
    
      //computed中的reverseMessage的依赖发生了改变，进行了程序计算
      this.message="hello监听变化后";
      console.log(newValue);
      console.log(oldValue);
    }
  }
}
</script>

点击“增加年龄”的按钮后：