Vue.js前端框架教程7：Vue计算属性和moment.js

文章目录

- - - [计算属性（Computed Properties）](#计算属性（Computed Properties）)
    - - 基本用法
      - 缓存机制
      - [计算属性 vs 方法](#计算属性 vs 方法)
      - 使用场景
      - [计算属性的 setter 和 getter](#计算属性的 setter 和 getter)
      - 结论
    - [Moment.js 进行时间处理](#Moment.js 进行时间处理)
    - - [1. 安装 Moment.js](#1. 安装 Moment.js)
      - [2. 在 Vue 组件中引入 Moment.js](#2. 在 Vue 组件中引入 Moment.js)
      - [3. 在全局使用 Moment.js](#3. 在全局使用 Moment.js)
      - [4. 使用 Vue 插件的方式引入 Moment.js](#4. 使用 Vue 插件的方式引入 Moment.js)
      - [5. 常用日期格式化方法](#5. 常用日期格式化方法)

计算属性（Computed Properties）

在 Vue 中，计算属性（Computed Properties）是一种特殊的方法，它们根据响应式依赖进行缓存，并且只有当依赖发生变化时才会重新计算。计算属性非常适合用于当你需要根据现有数据派生出一些状态时。

基本用法

计算属性可以通过在 Vue 实例中定义 computed 选项来创建：

javascript 复制代码

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    // 计算属性 fullName 是基于 firstName 和 lastName 的
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}

在上面的例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName。当你访问 this.fullName 时，Vue 将计算并返回 firstName 和 lastName 的组合。

缓存机制

计算属性是缓存的，这意味着除非依赖项发生变化，否则计算属性的值不会重新计算。这使得计算属性非常高效：

javascript 复制代码

export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubledCount() {
      return this.count * 2;
    }
  }
}

在这个例子中，doubledCount 只有在 count 发生变化时才会重新计算。

计算属性 vs 方法

计算属性和方法（Methods）都可以用于派生状态，但它们有以下不同：

计算属性：是基于它们的响应式依赖进行缓存的。只有当依赖项发生变化时，计算属性才会重新计算。
方法：不是缓存的。每次调用方法时，方法内的代码都会执行。

使用场景

计算属性：当你需要根据现有数据派生出一些状态，并且这个状态需要被缓存时。
方法：当你需要执行一个操作，并且每次调用都需要执行最新的操作时。

计算属性的 setter 和 getter

计算属性可以接受一个带有 get 和 set 的对象，这允许你定义如何计算属性的值，以及如何响应属性值的变化：

javascript 复制代码

export default {
  data() {
    return {
      internalValue: 0
    };
  },
  computed: {
    computedValue: {
      // getter
      get() {
        return this.internalValue + 1;
      },
      // setter
      set(newValue) {
        this.internalValue = newValue - 1;
      }
    }
  }
}

在这个例子中，computedValue 有一个 getter 和一个 setter。getter 返回 internalValue + 1，而 setter 允许你更新 internalValue。

结论

计算属性是 Vue 中处理派生状态的强大工具，它们提供了缓存机制，使得你的应用更加高效。了解何时使用计算属性和方法，可以帮助你更好地组织代码，并提高应用的性能。

Moment.js 进行时间处理

在 Vue 中使用 Moment.js 进行时间处理是一种常见的做法，它可以帮助我们轻松地处理日期和时间。以下是如何在 Vue 项目中集成和使用 Moment.js 的详细步骤：

1. 安装 Moment.js

首先，你需要在你的 Vue 项目中安装 Moment.js。你可以通过 npm 或 yarn 来安装它：

bash 复制代码

npm install moment --save
# 或者
yarn add moment

2. 在 Vue 组件中引入 Moment.js

安装完成后，你可以在任何 Vue 组件中引入 Moment.js 并开始使用：

javascript 复制代码

<template>
  <div>
    <p>当前时间是：{{ currentTime }}</p>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      currentTime: moment().format('YYYY-MM-DD HH:mm:ss')
    };
  }
};
</script>

3. 在全局使用 Moment.js

如果你希望在整个项目中都能使用 Moment.js，而不需要在每个组件中单独引入，可以在 Vue 的全局配置中进行设置。以下是一个示例：

在 src/main.js 中：

javascript 复制代码

import Vue from 'vue';
import App from './App.vue';
import moment from 'moment';

Vue.prototype.$moment = moment; // 将 moment 挂载到 Vue 的原型上

new Vue({
  render: h => h(App),
}).$mount('#app');

在任何组件中，你都可以通过 this.$moment 使用 Moment.js：

javascript 复制代码

<template>
  <div>
    <p>当前时间是：{{ currentTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: this.$moment().format('YYYY-MM-DD HH:mm:ss')
    };
  }
};
</script>

4. 使用 Vue 插件的方式引入 Moment.js

如果你想以插件的形式引入 Moment.js，可以创建一个 Vue 插件。以下是步骤：

在 src/plugins 目录下创建 moment.js 文件：

javascript 复制代码

import moment from 'moment';
const MomentPlugin = {
  install(Vue) {
    Vue.prototype.$moment = moment;
  }
};
export default MomentPlugin;

在 main.js 中引入并使用这个插件：

javascript 复制代码

import Vue from 'vue';
import App from './App.vue';
import momentPlugin from './plugins/moment';

Vue.use(momentPlugin);
new Vue({
  render: h => h(App),
}).$mount('#app');

5. 常用日期格式化方法

Moment.js 提供了丰富的日期格式化方法，以下是一些常用的示例：

基本日期格式化：

javascript 复制代码

this.$moment().format('YYYY-MM-DD'); // 输出：当前日期
this.$moment().format('YYYY-MM-DD HH:mm:ss'); // 输出：当前日期时间

相对时间：

javascript 复制代码

this.$moment("20111031", "YYYYMMDD").fromNow(); // 10 年前
this.$moment().startOf('day').fromNow(); // 13 小时前

日历时间：

javascript 复制代码

this.$moment().subtract(10, 'days').calendar(); // 10 天前
this.$moment().add(1, 'days').calendar(); // 明天

通过这些步骤和方法，你可以在 Vue 项目中高效地使用 Moment.js 进行日期和时间的处理。