主页

watch和watchEffect的区别

答案

1.指定依赖项： watch需要开发者明确指定要监听的具体响应式数据，并在回调函数中处理对应的逻辑。 watchEffect则会自动追踪在其函数体内部使用的所有响应式数据，无需手动指定依赖项。

2.执行时机： watch具有一定的惰性，即只有在数据变化时才会执行回调函数。 watchEffect在初始化时一定会执行一次，并且会收集要监听的数据。它更加即时，在页面首次加载时也会执行回调函数，除非设置了immediate: true。

3.获取原始值： watchEffect可以直接获取到原始值，而watch需要通过指定监视的属性来获取对应的值。

4.取消监听： watchEffect可以通过调用stop函数来取消监听。 watch需要通过返回一个取消监听的函数来实现取消监听。

5.使用场景： watch适用于需要监听特定数据或计算属性的变化，并执行相应的回调函数的场景。 watchEffect适用于自动追踪响应式数据并触发副作用的场景，如执行异步操作或更新UI。

综上所述，选择watch或watchEffect取决于具体的使用场景和对API控制的需求。如果需要对响应式数据进行细粒度的控制，可以使用watch API；如果只是需要自动追踪响应式数据并触发副作用，可以使用watchEffect函数。

Mr.PDG大约 7 分钟

module.exports和export的区别

在Node.js和CommonJS模块系统中，有两种主要的导出方式：module.exports 和 exports。它们之间的关系是比较容易混淆的，因为它们实际上引用的是同一个对象。

module.exports：
- module.exports 是一个完整的对象，最初是一个空对象 {}。
- 如果你希望将整个模块作为一个对象导出，你会直接给 module.exports 赋值。
- 示例：
```
// exampleModule.js
module.exports = {
    key: 'value',
    func: function() {
        // some code
    }
};
```
exports：
- exports 实际上只是 module.exports 的一个引用。在模块的顶层，exports 是指向 module.exports 的。
- 如果你将某个值直接赋给 exports，它会断开与 module.exports 的引用关系，从而无法正确导出。
- 示例：
```
// exampleModule.js
exports.key = 'value'; // This is fine
exports.func = function() {
    // some code
};
```
但是，下面这种方式是不正确的：
```
// exampleModule.js
exports = {
    key: 'value', // This will not work as expected
    func: function() {
        // some code
    }
};
```
这是因为这里将 exports 重新赋值了，导致它不再指向 module.exports。

Mr.PDG大约 1 分钟

SPA单页面部署后刷新404

项目场景

将vue项目打包部署到nginx上面运行
打开nginx的主配置文件： nginx安装目录/conf/nginx.conf。
将vueCLI打的项目包（dist目录）交给nginx服务来管理。使得访问某些路径时，可以指向dist/index.html。

Mr.PDG大约 1 分钟

vue-introjs新手引导

介绍

vue-introjs是一个基于intro.js的vue组件，用于实现新手引导功能。

文档链接

安装

npm install intro.js vue-introjs --save

Mr.PDG大约 1 分钟

transition结合animate.css

介绍

animate.css是一个动画库，可以实现各种各样的动画效果。

Vue的transition标签可以结合animate.css来实现动画效果。

文档链接

安装

npm install animate.css --save

Mr.PDG小于 1 分钟

transition动画闪烁问题

问题描述

这个问题经常出现在路由切换动画上，或者两个div交替切换的时候。

前一个动画没有执行结束，后一个动画已经开始了，这时候就会出现闪烁的问题。

前一个div在彻底动画结束前，还占据着布局位置，看起来后面的一个div就像是闪烁了一下。

解决方案

在transition标签上添加mode="out-in"属性，这样就可以解决这个问题。

代码示例

<template>
    <transition name="fade-transverse" mode="out-in">
        <keep-alive :include="cachedViews">
            <router-view />
        </keep-alive>
    </transition>
</template>

<style lang="scss" scoped>
.fade-transverse-leave-active,
.fade-transverse-enter-active {
    transition: all .5s;
}

.fade-transverse-enter {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transverse-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>

Mr.PDG小于 1 分钟

npm常用命令

清理缓存

npm cache clean --force

Mr.PDG小于 1 分钟

组件继承

前言

在vue3中extends是在不修改原有组件的情况下，对组件进行扩展，这跟vue2中不一样，在vue2中是可以做到完全继承组件的所有内容，包括template，但是在vue3中是不可以的，vue3中extends只能继承组件的属性和事件，template是不会继承的，所以在vue3中extends的使用场景是有限的，一般只用于对组件的属性和事件进行扩展，而不是对组件的内容进行扩展，而且vue2中是可以做到重写覆盖原组件的一些函数，vue3中是不可以的，只能扩展。

Mr.PDG大约 1 分钟

自定义代码片段

设置代码片段

ctrl+shift+P 打开命令窗口，输入“snippet”，选择“首选项：配置用户代码片段”
选择一个新的代码片段文件，或者选择一个已有的代码片段文件
编辑代码片段文件，保存

代码片段文件格式

{
    "vuesetup": {
		"prefix": "vuesetup",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup name=\"${0}\"></script>",
			"",
			"<style lang=\"scss\" scoped></style>",
			"",
		],
		"description": "vuesetup"
	}
}

Mr.PDG小于 1 分钟

项目操作手册

准备环境

node

`windows`用户请注意！！！这很重要！！！

安装前请获取管理员权限
设置开发者模式
不许使用中文用户名和中文文件夹

nvm或者volta任选一个，nvm每次进入项目需要手动切换node版本，volta可以自动切换

Mr.PDG大约 1 分钟

...

跳转到:

PDG-DOC

Vue3

SPA单页面部署后刷新404

项目场景

介绍

安装

介绍

安装

问题描述

解决方案

代码示例

清理缓存

前言

设置代码片段

代码片段文件格式

准备环境

node