vue中计算属性computed和侦听器watch

1.computed计算属性

模板中可以使用简单的运算，但是太多的逻辑运算会让模板过重且难以维护
如果模板不再是简单的声明式逻辑，需要进行任何复杂的逻辑操作的都应该使用计算属性

例如：

<template>
  <div id="app">
     {{ message.split("").reverse().join("") }}
  </div>
</template>

<script>
export default {
   name: "App",
   data() {
   return {
     message: "hello",
   };
  },
};
</script>

此时要获取message的翻转字符串，这个时候模板不是简单的声明式逻辑，需要经过逻辑运算，如果在模板需要多次使用该翻转字符串，会让模板更难维护，这时候就应该使用计算属性。

<template>
 <div id="app">
    {{ reversedMessage }}
 </div>
</template>

<script>
export default {
   name: "App",
   data() {
     return {
       message: "hello",
     };
   },
    computed: {
      reversedMessage: function() {
        return this.message.split("").reverse().join("");
     },
  },
};
</script>

如果使用方法也能达到同样的效果

<template>
 <div id="app">
    {{ reversedMessage() }}
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
   return {
     message: "hello",
    };
  },
 methods: {
     reversedMessage: function() {
         return this.message.split("").reverse().join("");
    },
  },
 computed: {},
};
</script>

两种方式的最终结果是完全相同的，不同的是计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时它们才会重新求值，在上面的例子中，只要message不改变，那么计算属性就会立即返回之前的计算结果，不会重新执行函数。但是如果使用方法，每次重新渲染都会重新执行一次，使用计算属性因为有缓存，就能避免很多不必要的重复运算。

computed默认只有一个getter属性，还可以设置一个setter属性

默认的getter：

<template>
 <div id="app">
   <div>data:{{ data }}</div>
   <div>addData:{{ addData }}</div>
   <button @click="add">加</button>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
   return {
     data: 0,
    };
  },
 methods: {
   add() {
     this.data = this.data + 1;
    },
  },
 computed: {
   addData: {
     get() {
        return this.data + 5;
      },
    },
  },
};
</script>

setter属性：只有在监听的属性发生改变时才会触发

<template>
 <div id="app">
   <div>data:{{ data }}</div>
   <div>addData:{{ addData }}</div>
   <button @click="add">加</button>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
   return {
     data: 0,
    };
  },
 methods: {
   add() {
     this.addData = this.addData + 1;
    },
  },
 computed: {
   addData: {
     get() {
       return this.data + 5;
     },
     set() {
       this.data = this.data + 1;
     },
    },
  },
};
</script>

2.侦听器watch

当需要在数据变化时执行异步或开销较大的操作时使用watch

例如：

<template>
 <div id="app">
   <div>{{ message }}</div>
    {{ watchData }}
   <button @click="add">加</button>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
   return {
       message: 2,
       watchData: "",
    };
 },
 methods: {
   add() {
     this.message = ++this.message;
    },
 },
 watch: {
   message() {
     setTimeout(() => {
       this.watchData = this.message + 5;
      }, 500);
    },
  },
};
</script>