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

文章目录

- - - 计算属性（Computed Properties）
    - - 基本用法
      - 缓存机制
      - 计算属性 vs 方法
      - 使用场景
      - 计算属性的 setter 和 getter
      - 结论
    - Moment.js 进行时间处理
    - - 1. 安装 Moment.js
      - 2. 在 Vue 组件中引入 Moment.js
      - 3. 在全局使用 Moment.js
      - 4. 使用 Vue 插件的方式引入 Moment.js
      - 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: {// getterget() {return this.internalValue + 1;},// setterset(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 来安装它：

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 进行日期和时间的处理。