时间格式转换 时间格式转换　　在日常代码中，我们会遇到要时间时间的需求，常规的话我们都是使用 date 函数来获取时间然后对获取到的时间使用各种函数来获取想要的值，最后做一个组装。常规方法// 以前我们想要获取 年/月/日 时：分：秒 这种格式的时间需要写很多函数进行拼接 // 获取当前时间 let currentTime = new Date() // 获取的年份为多少 let y = currentTime.getFullYear() // 获取当前时间的月份为多少，因为月份的返回值为 0 - 11，所以想要获得当前月份需要给返回值 + 1 let m = currentTime.getMonth() + 1 // 获取当前时间为日 let d = currentTime.getDate() // 获取当前时间的小时 let h = currentTime.getHours() // 获取当前时间的分钟 let mi = currentTime.getMinutes() // 获取当前时间的秒 let s = currentTime.getSeconds() // 将刚刚获得的时间各部分进行组装就可以获得想要的格式，比如我想在要获得 年/月/日 时：分：秒 这个格式 let timeFormat = y + '/' + m + '/' + d + ' ' + h + ':' + mi + ':' + s // 还有另外一种简单的方法，也可以获得上述格式 // toLocaleDateString 方法可以直接获取当前时间的 年月日 时间，返回的格式为 年/月/日 let date = currentTime.toLocaleDateString() // toLocaleTimeString 方法可以获取到当前时间的 时分秒，返回的是12小时制的时间，返回格式为 时:分:秒 let time = currentTime.toLocaleTimeString() // 如果想要获取 24 小时制的时间格式，则需要在 toLocaleDateString 函数中传入参数 let time = currentTime.toLocaleTimeString('chinese', { hour12: false }) timeFormat = date + ' ' + timemoment 库　　我们还可以使用 moment 库来完成对时间格式的操作。首先我们需要在项目中安装 moment 库。npm i moment --save　　在安装完成后在需要使用的组件中进行引入即可完成使用import moment from 'moment' let time = moment(new Date()) time = time.format('YYYY/MM/DD HH:mm:ss') // 返回值为 年/月/日 时:分:秒 time = time.format('YYYY-MM-DD HH:mm:ss') // 返回值为 年-月-日 时:分:秒

Vue3 Hooks 的使用 　　在 Vue2 中我们可以使用 Mixins 混入来完成对一些公共方法的封装，后面在组件中使用时只需要将混入引进去就可以了，混入在以前有些过点击可以去看 混入的写法 ，但是在 Vue3 中，我们可以使用 hooks 来完成同样功能。hooks 文件import {ref} from 'vue' export default () => { const test = ref('我是hooks里面的属性') const testMethod = () => { console.log('我是hooks里面的方法') } // 在这里我们需要将他们暴露出去 return { test, testMethod } }组件内使用<template> <div> {{ test }} </div> <button @click='testMethod()'></button> </template> <script setup> // 将hook.js文件引入需要使用的组件里面 import hook from '@/hooks/hook.js' // 通过解构赋值将需要的属性方法添加进组件中 const { test, testMethod } = hook() </script>

Vue2 中混入的使用 　　在 Vue 中，我们会遇到同一套方法在该项目很多组件中都会使用到，然后如果在每个组件都写这套方法的话，费时费力，而且如果后期需要对方法进行改动时，也不方便，增加了后期修改、维护的成本。　　在这里我们可以使用混入来解决这个问题，Vue 官方文档对混入的定义为： Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。使用混入　　简单来说，混入就是把多个组件共用的属性、方法、生命周期钩子函数封装在一个 js 文件中，然后在使用的时候，再将它引入到组件中。export default { data() { return { name: 'Tom' } }, methods: { test() { console.log(this.name) } } }　　假如这段代码需要在多个组件中进行使用的话，不使用混入的话，我们需要在每个组件中的 data 和 methods 中都需要写 name 和 test() ，但是如果使用混入，我们可以将这段代码写在一个 js 文件中，然后引入到组件中，然后就可以使用了，这样既可以让我们少写重复代码，也可以让后期的维护、修改成本降低。import mixin from '@/mixins/mixin' export default { mixins:[mixin], }　　我们使用 import 将混入的那个 js 文件引入到组件中，就可以在组件中使用 mixin.js 里面的属性和方法了。使用注意命名问题　　在我们使用混入的时候也需要注意一点，混入中的方法和属性不能和组件内的方法属性名相同。　　如果混入和组件内的属性方法命名不同的话，那么会将混入里面的属性方法合并到组件内。　　但是如果使用的命名相同的话，那么会使用组件内的值，混入里面的值会被覆盖掉。生命周期　　混入中也是可以写生命周期函数的，在组件内引入混入文件后，生命周期函数也是会进行合并执行的，混入内的方法会先执行。

Vue3 中 ref 标记组件使用 　　在 Vue3 中我们还可以使用 ref 标记组件来进行获取父子组件获取属性和方法的操作。父组件<template> <hello-world ref='son'></hello-world> <button @click='getSon()'>获取</button> </template> <script setup> // 首先还是先引入子组件 import HelloWorld from './components/HelloWorld.vue' // 然后引入 ref ,并声明 son import {ref} from 'vue' const son = ref() const getSon = () => { console.log(son.value.title) son.value.sonMethod() } </script>子组件<template> <div> {{ title }} </div> </template> <script setup> import {ref} from 'vue' const title = ref('我是子组件的title') const sonMethod = () => { console.log('我是子组件的方法') } // 最要的一步，这里我们需要把父组件需要的属性和方法暴露出去，这样父组件才能获取的到 defineExpose({sonMethod, title}) </script>

npm i 安装依赖 node-sass 报错 　　上周在 GitHub 上面拉项目，拉下来后，使用 npm i 安装项目依赖时，始终报 node-sass 安装错误。　　遇见这个问题时，在网上找了很多资料但是很多都没有用处，最后将 node 的版本降低后，这个问题就解决了。　　最开始我安装的是 v16.14.0 版本的 node，npm的版本为 8.1，在安装项目依赖时报了很多错误。一些项目还可以使用 npm i --legacy-peer-deps 来进行安装依赖完成。但是 node-sass 始终在报错。最后将 node 版本降低，然后完成了 node-sass 的安装。后面安装的 node 版本为 v14.19.0，npm 的版本为 6.14.16。