Vue基础篇三：Vue的计算属性与侦听器系列文章目录一、计算属性computed二、侦听器watch三、计算属性与侦听器的区别

72 阅读 0 评论 48 点赞

我是靠谱客的博主高挑歌曲，最近开发中收集的这篇文章主要介绍Vue基础篇三：Vue的计算属性与侦听器系列文章目录一、计算属性computed二、侦听器watch三、计算属性与侦听器的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器

文章目录

系列文章目录
一、计算属性computed
二、侦听器watch
三、计算属性与侦听器的区别

一、计算属性computed

计算属性可以减少模板中的计算逻辑，进行数据缓存，提高性能。

<template>
  <div>
    <p>请输入字符串:</p>
    <input type="text" v-model="message" />
    <br />

    <p>反转后的字符串是:</p>
    <p>{{ reverseMessage }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  // 计算属性：反转字符串
  computed: {
    reverseMessage: function () {
      console.log("执行计算属性：反转字符串");
      return this.message.split("").reverse().join("");
    },
  },
};
</script>

<template>
    <computed></computed>
</template>
<script>
import Computed from './components/Computed.vue';
export default {
    name: "App",
   components: {
    Computed
  },
}
</script>

在这里插入图片描述

二、侦听器watch

watch可以对事件进行侦听并执行逻辑，比如函数节流，Ajax异步获取数据，甚至操作DOM.

<template>
  <div>
    <p>{{ a }}</p>
    <button @click="add">随机赋值</button>
    <p>a原来的值为:{{ old }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      old: null,
    };
  },
  watch: {
    a: function (val, oldVal) {
      console.log("a old value=" + oldVal);
      console.log("a new value" + val);
      this.old = oldVal;
    },
  },
  methods: {
    add() {
      this.a = Math.random();
    },
  },
};
</script>

<template>
    <Watch></Watch>
</template>
<script>
import Watch from './components/Watch.vue';
export default {
    name: "App",
   components: {
    Watch
  },
}
</script>