最常见的Vue中的问题摘录

学习目标：Vue使用过程中常见问题摘录(一)

提示：这里记录了在编写vue过程中常见的问题摘录，希望可以帮到你哦

例如：

• Vue知识避坑，望大家绕坑而行……

---

一、加载问题

1、版本问题【node和npm的版本要对应】

在vs code编辑器中使用vue时不能正常使用

通过cmd的指令查看一下:

Get-ExecutionPolicy -List

• MachinePolicy
  由 组策略计算机的所有用户设置。
• UserPolicy
  由 组策略当前用户的设置。
• Process
  Process 范围仅影响当前 PowerShell 会话。 执行策略保存在环境变量 中 $env:PSExecutionPolicyPreference ，而不是注册表中。 关闭 PowerShell 会话后，将删除变量和值。
• CurrentUser
  执行策略仅影响当前用户。 它存储在注册表 HKEY_CURRENT_USER项中 。
• LocalMachine
  执行策略会影响当前计算机上所有用户。 它存储在注册表 HKEY_LOCAL_MACHINE项中 。

可以设置一下：[修改策略]

set-ExecutionPolicy RemoteSigned

2、加载慢的问题【设置镜像即可】

设置淘宝镜像

####### 设置

npm config set registry https://registry.npm.taobao.org
或者设置  https://registry.npmmirror.com/  【速度也是不错的哦！】

####### 查看

npm config get registry

测试是否可以使用，安装vue新项目来测试

npm init vue@latest

cmd窗口内容
####### 设置淘宝镜像源

C:\Users\xuguoguo>npm config set registry https://registry.npm.taobao.org
C:\Users\xuguoguo>npm config get registry
https://registry.npm.taobao.org/
C:\Users\xuguoguo>cd Desktop
C:\Users\xuguoguo\Desktop>cd MyWork
C:\Users\xuguoguo\Desktop\MyWork>npm init vue@latest
Need to install the following packages:
  create-vue@3.3.4
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
√ Project name: ... YQKSH
√ Package name: ... yqksh

 或者设置成
 https://registry.npmmirror.com/  【速度也是不错的哦！】

二、在vue页面中添加el-table或者el-dialog等组件时出现以下情况

报错的原因：

在页面绘制的时候，页面突然发生调整大小的事件，导致了样式和布局都需要重新评估，这个调整大小导致的布局变化，将延迟到下一帧来绘制。

解决方案

在app.vue或者main.js中放入以下代码：【main.js】

或者
![在这里插入图片描

代码如下:

```javascript
const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
}

下面是对这个代码的解释：

首先，debounce函数用于限制一个函数的执行频率，确保在一定时间间隔内只执行一次。它接受两个参数，一个是要执行的函数fn，另一个是延迟时间delay。函数内部使用setTimeout来实现延迟执行，每次调用时会清除之前的定时器，然后设置一个新的定时器来延迟执行目标函数。

接下来，代码对window.ResizeObserver进行了扩展。它将原始的ResizeObserver保存为_ResizeObserver，然后定义了一个新的ResizeObserver类，重写了其构造函数。在新的构造函数中，传入的回调函数被用debounce函数处理，确保回调函数在16毫秒的间隔内执行一次。这样做是为了限制ResizeObserver的回调频率，以避免过多的触发，提高性能。

这段代码实现了对ResizeObserver的改写，通过限制回调函数的执行频率来优化性能。 通过调整回调频率能解决上面讲解的问题报错原因。

二、时间渲染问题【方式有很多】

1、使用moment.js进行时间格式化： 首先，安装moment.js库：

npm install moment

然后，在Vue组件中引入moment.js并使用它来格式化时间：

import moment from 'moment';
 
export default {
  data() {
    return {
      date: new Date()
    };
  },
  computed: {
    formattedDate() {
      return moment(this.date).format('YYYY-MM-DD HH:mm:ss');
    }
  }
};

如：在时间的列字段上添加formatter函数

在methods中进行定义

formatDate(row,column){
        let datac=row[column.property];
        console.log(datac);
        return moment(datac).format('YYYY-MM-DD HH:mm:ss');  
}

2、使用day.js进行时间格式化： 首先，安装day.js库：

npm install dayjs

然后，在Vue组件中引入day.js并使用它来格式化时间：

import dayjs from 'dayjs';
 
export default {
  data() {
    return {
      date: new Date()
    };
  },
  computed: {
    formattedDate() {
      return dayjs(this.date).format('YYYY-MM-DD HH:mm:ss');
    }
  }
};

如：在时间的列字段上添加formatter函数

在methods中进行定义

以上是本锅锅遇到的常见的问题，希望可以帮助大家避避坑！~~~

如果需要编程类的工具或者源码的朋友们，可关注微信公众号"锅锅编程生活"或者扫描二维码关注回复关键字/后台留言获取即可！