官方解释：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
官方的解释通常都是晦涩难懂的，因为要专业和准确嘛！
我们可以用我们自己容易理解的话来说说Vue中的Mixin是什么。
民间解释：
将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。
这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。
vue记录使用日志 页面停留时间
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import API from '@/modules/system/api/api_userTime' const router = new Router({ mode: 'history', base: process.env.BASE_URL, scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap }) // API 保存数据接口 let startTime = Date.now() let currentTime let standingTime = 0 let pageName = [] router.beforeEach((to, from, next) => { // 如果to存在，则说明路由发生了跳转 if (to) { // 清空界面名 pageName=[] // 离开界面 // 第一步：页面跳转后记录一下当前的时间 currentTime currentTime = Date.now() standingTime = parseInt((currentTime - startTime) / 1000) from.matched.forEach(routeItem => { pageName.push(routeItem.meta.title) }) // ------------ // 第二步：在这里把 currentTime - startTime 的 差值 发送给后端 // ------------ if(pageName.length > 0){ const params = { // 界面 pageName: pageName.join("-"), // 进入界面时间 gmtCreate: '', // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'), // 离开时间 gmtLeave: '', // gmtLeave: new moment(currentTime).format('YYYY-MM-DD HH:mm:ss'), /** * 进入或离开状态 * enter进入 * exit 离开 */ type: 'exit', // 停留时长 // duration: standingTime } API.add(params).then(function(result) { console.log(result) }).catch(function(result) { // console.log(result) }) } // 第三步：每次都要初始化一下 startTime startTime = Date.now() pageName = [] // console.log('======== 分割线 ========') } if(from){ // 进入界面 to.matched.forEach(routeItem => { pageName.push(routeItem.meta.title) }) if(pageName.length > 0){ const param = { // 界面 pageName: pageName.join("-"), // 进入界面时间 gmtCreate: '', // gmtCreate: new moment(startTime).format('YYYY-MM-DD HH:mm:ss'), // 离开时间 gmtLeave: '', /** * 进入或离开状态 * enter进入 * exit 离开 */ type: 'enter' } console.log(param); API.add(param).then(function(result) { console.log(result) }).catch(function(result) { // console.log(result) }) } } next() }) export default router |
from:https://blog.csdn.net/Beloved_Jodie/article/details/120924875
View Details|
1 2 3 4 5 6 7 |
生命周期： Vue是一个构造函数，当执行这个函数时，相当于初始化vue实例； 在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新， 而在这个初始化过程中，Vue又会在不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数； |
首先我们来结合Vue官方提供的图看一下Vue生命周期到底发生了些啥 beforeCreate data和methods未初始化(loading事件) created（已创建） data、methods初始化完成，如果调用数据或方法最早只能在created中操作 此时拿不到DOM元素 (后台数据请求和耗时操作) beforeMount vue模板已经在内存中渲染好了，但还没有挂载到页面中，此时页面还是旧的 （render 被初次调用用于生成虚拟dom） mounted（已安装） 页面和内存的数据已经同步， 只要执行完mounted，就表示整个Vue实例已经初始化完毕。 (dom树已渲染到页面，最早可以在mounted中操作DOM) beforeUpdate 页面中显示的数据是旧的，data的数据已经是最新的，页面显示未和数据同步。 （data的数据发生改变会执行这个钩子） update（已更新） 更新DOM完成,页面数据更新 （执行依赖于 DOM 的操作。每次进行数据更新时updated都会执行） beforeDestroy 实例数据还都是可用状态 （确认删除XX吗？） Destroyed 组件已经销毁不可用 （执行一些优化操作,清空定时器。） from:https://blog.csdn.net/qq_42504266/article/details/121881711
View Detailssockjs-node介绍 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端：sockjs-node（https://github.com/sockjs/sockjs-node） 客户端：sockjs-client（https://github.com/sockjs/sockjs-client） 开发时，如果变更网络环境（如切换wifi导致开发服务器的IP地址更换），服务器不知道如何确定访问源，就有可能造成上述情况 报错解决 方法一：（推荐）在项目根目录找到/package-lock.json文件，修改如下： 方法二： 项目根目录，找到/node_modules/sockjs-client/dist/sockjs.js 找到代码的 1605行，注视掉xhr请求
|
1 2 3 4 5 6 |
try { // self.xhr.send(payload); 把这里注掉 } catch (e) { self.emit('finish',0,''); self.\_cleanup(false); } |
参考：https://blog.csdn.net/Simon9124/article/details/105581492?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase from:https://blog.csdn.net/xingchen678/article/details/122429686
View Detailsaxios 会默认序列化 JavaScript 对象为 JSON。 如果想使用 application/x-www-form-urlencoded 格式，你可以使用下面的配置。 在浏览器环境，你可以使用 URLSearchParams API：
|
1 2 3 4 |
const params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params); |
from:https://blog.csdn.net/init_yanxiao/article/details/113845330
View Details今天开发遇到个问题，服务器后端的Long类型数据，传到前端会出现精度丢失，如：164379764419858435，前端会变成164379764419858430。
在浏览器中做测试可知，这就是一个精度丢失的问题。
前端使用的axios来发起请求的，最开始以为是浏览器的问题，但是通过postman来请求是没问题，打开浏览器开发工具，在xhr下的response响应中也是没问题的，代表是请求成功后数据格式化出问题了，下面讲解下各种解决方案。
View Details我们在windows平台上运行npm install安装依赖的时候，会出现需要vcbuild环境，如下截图所示，根据提示解决办法是指定系统安装的vcbuild到环境变量的path中。 解决办法就是通过npm全局安装windows-build-tools模块，还需要加上参数--production。 安装成功的打印信息： 安装过程会下载一个python2.7的环境，最后会在用户根目录生成一个.windows-build-tools目录。 .windows-build-tools目录中的内容如下 截图所示： 当我们再次进行npm install安装某些依赖的时候，就不会再报无法加载VCBuild.exe组件错误了。 from:https://blog.csdn.net/feinifi/article/details/104655415
View Details1. 默认使用
|
1 2 3 4 5 6 7 8 9 10 |
props: { obj: { type:Object, default:() => ({}) }, arr: { type:Array, default:() => ([]) } } |
2. 为什么需要通过函数的形式 因为对象和数组都是属于我们的复杂类型，在进行访问指向的时候我们使用的是对象和数组的地址，而不像基础数据类型那。 如果我们没有通过函数的形式去设置对象和数据类型的默认值，而是直接采用{}和[],如果多个使用该组件的地方因为没有传递props而使用了默认值，假设其中一个地方我们修改了默认的值（不推荐，会报警告，不符合反向数据流），那么其他的地方由于指向的是同一个内存中的引用地址，其他地方的显示值也会发生修改 我们使用了函数的形式去返回，保证每次函数执行出来的都是返回一个新的对象，这样就不会出现上面所有的情况 from:https://blog.csdn.net/YoungtiNine/article/details/121367452
View Details