文章目录
- 计算属性（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 选项来创建：
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 的组合。
缓存机制
计算属性是缓存的，这意味着除非依赖项发生变化，否则计算属性的值不会重新计算。这使得计算属性非常高效：
export default {data() {return {count: 0};},computed: {doubledCount() {return this.count * 2;}}
}
在这个例子中，doubledCount 只有在 count 发生变化时才会重新计算。
计算属性 vs 方法
计算属性和方法（Methods）都可以用于派生状态，但它们有以下不同：
- 计算属性：是基于它们的响应式依赖进行缓存的。只有当依赖项发生变化时，计算属性才会重新计算。
- 方法：不是缓存的。每次调用方法时，方法内的代码都会执行。
使用场景
- 计算属性：当你需要根据现有数据派生出一些状态，并且这个状态需要被缓存时。
- 方法：当你需要执行一个操作，并且每次调用都需要执行最新的操作时。
计算属性的 setter 和 getter
计算属性可以接受一个带有 get 和 set 的对象，这允许你定义如何计算属性的值，以及如何响应属性值的变化：
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 并开始使用：
<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 中：
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：
<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文件：
import moment from 'moment';
const MomentPlugin = {install(Vue) {Vue.prototype.$moment = moment;}
};
export default MomentPlugin;
- 在
main.js中引入并使用这个插件：
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 提供了丰富的日期格式化方法，以下是一些常用的示例：
-
基本日期格式化：
this.$moment().format('YYYY-MM-DD'); // 输出：当前日期 this.$moment().format('YYYY-MM-DD HH:mm:ss'); // 输出：当前日期时间 -
相对时间：
this.$moment("20111031", "YYYYMMDD").fromNow(); // 10 年前 this.$moment().startOf('day').fromNow(); // 13 小时前 -
日历时间：
this.$moment().subtract(10, 'days').calendar(); // 10 天前 this.$moment().add(1, 'days').calendar(); // 明天
通过这些步骤和方法，你可以在 Vue 项目中高效地使用 Moment.js 进行日期和时间的处理。
