vue 计算属性和侦听器

计算属性 常规

<template>
  <div>
    <!-- 旧的list -->
    <ul>
      <li :key="item" v-for="item in list">{{ item }}</li>
    </ul>
    <!-- 新的list -->
    <ul>
      <li :key="item" v-for="item in newList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
// 计算属性和侦听器
export default {
  name: "App",
  data() {
    return {
      list: [1, 3, 5, 7, 9],
    };
  },
  computed: {
    newList() {
      return this.list.filter(item => item > 6)
    }
  }
};
</script>

计算属性 getter和setter

<template>
  <div>
    <!-- 旧的list -->
    <ul>
      <li :key="item" v-for="item in list">{{ item }}</li>
    </ul>
    <!-- 新的list -->
    <ul>
      <li :key="item" v-for="item in newList">{{ item }}</li>
    </ul>

    <button @click="handle">设置一下newList的set</button>
  </div>
</template>

<script>
// 计算属性和侦听器
export default {
  name: "App",
  data() {
    return {
      list: [1, 3, 5, 7, 9],
    };
  },
  computed: {
    newList: {
      get() {
        return this.list.filter((item) => item > 6);
      },
      set(val) {
        this.list.push(val)
      },
    },
  },
  methods: {
    handle() {
      this.newList = 10
    }
  }
};
</script>

watch 常规监听

<template>
  <div>

    <ul>
      <li :key="item" v-for="item in list">{{ item }}</li>
    </ul>

    <button @click="handle">list数组的第二个</button>
  </div>
</template>

<script>
// 计算属性和侦听器
export default {
  name: "App",
  data() {
    return {
      list: [1, 3, 5, 7, 9],
    };
  },
  watch: {
    list() {
      console.log('bianhuale')
    }
  },
  methods: {
    handle() {
      this.list.splice(2, 1, 100)
    }
  }
};
</script>

watch监控对象中的某个属性

<template>
  <div>
    <ul>
      <li :key="key" v-for="(value, key) in info">{{ key }} - {{ value }}</li>
    </ul>

    <button @click="handle">改变info</button>
  </div>
</template>

<script>
// 计算属性和侦听器
export default {
  name: "App",
  data() {
    return {
      info: {
        name: "numo",
        age: 31,
      },
    };
  },
  watch: {
    "info.name"() {
      console.log("bianhuale");
    },
  },
  methods: {
    handle() {
      this.info.name = "numo2";
    },
  },
};
</script>

watch 监控整个对象，并且带有deep和immediate

<template>
  <div>
    <ul>
      <li :key="key" v-for="(value, key) in info">{{ key }} - {{ value }}</li>
    </ul>

    <button @click="handle">改变info</button>
  </div>
</template>

<script>
// 计算属性和侦听器
export default {
  name: "App",
  data() {
    return {
      info: {
        name: "numo",
        age: 31,
      },
    };
  },
  watch: {
    "info": {
      handler() {
        console.log("改变了");
      },
      // 深度监控info对象的改变
      deep: true,
      // immediate 立即执行，也就是首次执行
      immediate: true
    },
  },
  methods: {
    handle() {
      this.info.name = "numo2";
    },
  },
};
</script>