vue2 computed 、watch 使用

computed 有缓存，依赖不变则不重新计算 ，必须依赖其他响应式数据，且返回新值

  有数据过滤、排序、格式转换等计算逻辑 

<template>
  <div>
    <input v-model="searchText" placeholder="搜索名称">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: "",
      list: [
        { id: 1, name: "苹果" },
        { id: 2, name: "香蕉" },
        { id: 3, name: "橙子" }
      ]
    };
  },
  computed: {
    // 根据搜索文本过滤列表
    filteredList() {
      return this.list.filter(item => 
        item.name.includes(this.searchText)
      );
    }
  }
};
</script>

 

 

watch   无缓存，数据变化即触发 ，可监听单个数据，无返回值

<script>
export default {
  data() {
    return { user: { name: '', age: 0 } };
  },
  watch: {
    // 监听对象内部属性（深度监听）
    'user.name': {
      handler(newVal) {
        console.log('用户名变化：', newVal);
      },
      immediate: true, // 初始化时立即执行一次
      deep: false // 监听单个属性无需深度，若监听整个对象需设为 true
    },
    // 监听整个对象（需开启 deep）
    user: {
      handler(newVal) {
        console.log('用户信息变化：', newVal);
      },
      deep: true // 深度监听对象内部所有属性
    }
  }
};
</script>