Vue中computed和watch示例区别

computed示例

<template>
  <div class="box">
    <input type="text" v-model="keyCode" placeholder="筛选" />
    <ul>
      <li v-for="(item, index) in filterCode" :key="index">{
   
   { item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      keyCode: "",
      list: ["apple", "huawei", "sony", "oppo", "vivo"],
    };
  },
  computed: {
     
     
    filterCode() {
     
     
      var arr = [];
      for (let i in this.list) {
     
     
        if (this.list[i].indexOf(this.keyCode) != -1) {
     
     
          arr.push(this.list[i]);
        }
      }
      return arr;
    },
  },
};
</script>

watch示例

<template>
  <div class="box">
    <input type="text" v-model="firstName" placeholder="姓" />
    <input type="text" v-model="lastName" placeholder="名" />
    {
   
   { fullName }}
  </div>
</template>

<script>
export default {
     
     
  data() {
     
     
    return {
     
     
      firstName: "",
      lastName: "",
      fullName: "",
    };
  },
  watch: {
     
     
    firstName(value) {
     
     
      this.fullName = `${
       
       value}${
       
       this.lastName}`;
    },
    lastName(value) {
     
     
      this.fullName = `${
       
       this.firstName}${
       
       value}`;
    },
  },
};
</script>

computed

1. 依赖数据缓存，只有当数据变化时才会执行
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3. 变量不用在data函数中的定义

watch

1. 支持数据变动的异步操作
2. 接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值
3. 监听数据必须是data中声明过或者父组件传递过来的props中的数据
4. 产生较大的性能开销