Vue中computed和watch示例区别

computed示例

代码语言：javascript复制

<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示例

代码语言：javascript复制

<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. 产生较大的性能开销

缓存 data watch 性能 异步

0 人点赞