个人技术分享

前端开发部署：Visual Studio Code + vue

本教程全部采用默认安装路径，因为在进行自定义路径安装的时候，需要配置各种环境变量，在这个配置过程中，可能出现各种很混乱的问题。==C:\Program Files\nodejs==这里不勾选，后续需要什么tools的时候，再进行安装即可。Win + R 打开 CMD输入版本查看命令，查看安装是否成功2 输入下面指令查看路径webpack用来项目构建、打包、资源整合等。注意这里安装新的脚手架。出现warn没关系，继续执行即可。查看vue版本及是否成功：四 基于上述vue创

【区分vue2和vue3下的element UI ¶Upload 上传组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 中，我们通常使用 Element UI 的el-upload组件来实现文件上传功能。然而，在 Vue 3 中，由于 Element UI 没有官方支持 Vue 3 的版本，我们通常会使用 Element Plus（Element UI 的 Vue 3 版本）的el-upload组件，尽管两者的使用方式大致相同，但也有一些差异。

vue manually select

一个包含多个页面的应用程序，每个页面包含多个组件，这些组件拥有各自的表单，并且希望这些表单展示的数据能够在不同组件之间共享，那么可以使用 Vuex 来管理这些数据。在这种情况下，您可以将这些需要共享的数据存储在 Vuex 的状态中，这样就可以在整个应用程序中访问和修改这些数据，实现全局共享的效果。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。总结来说，您对 Vuex 的作用的解释是准确的。

react组件中的this

上面的代码中，在构造函数中可以用 this 读取到 function 声明的方法，因为构造函数是在组件实例的上下文中执行的。因此，当事件触发时，handleClick 中的 this 指向的是全局对象（在非严格模式下）或者 undefined（在严格模式下），而不是 MyComponent 的实例。简而言之，this.handleClick 是组件实例上的一个方法，而在构造函数中绑定 this 是为了确保在方法内部 this 指向组件实例，即使在它作为回调函数被传递给其他组件或方法时也是如此。

探索Web前端三大主流框架：React，Angular和Vue.js

其中，React，Angular和Vue.js是最受欢迎的三大主流前端框架，它们分别由Facebook，Google和前Google工程师尤雨溪（Evan You）创建。总的来说，React，Angular和Vue.js各有其独特的优势和特点，选择哪个框架取决于项目的具体需求和开发团队的偏好。不过，无论选择哪个框架，都可以确信，你将站在一个坚实的基础之上，构建出高性能，响应式的Web应用。Angular是一个由Google维护的开源Web应用框架，它提供了一个完整且丰富的功能集，用于构建跨平台的应用。

vue-pdf 部分中文显示错误，第二次打开是空白，解决方法

首先是，有一些pdf正常展示，另一些pdf中只显示个别字，很明显是错误的。3的讨论，很多人遇到了这个问题，定位到了是因为Cmap的缓存问题。但是处理之后遇到了新的问题，假如url更新，打开新的pdf。整体根据1可以实现功能，但是会遇到标题中提到的两个bug。5给我一个思路是调用子组件的重置数据方法,解决空白问题。（目前仅做一下记录，之后有时间详细测试+更新本文章）2中也提到了，但是里面的解决方法，对我无效。通过2中更新cmap的方法，可以成功处理。然后根据5的思路改一下，就成功了。

Vue3-watch监听ref和reactive数据的五种情况及watchEffect

用于声明在数据更改时调用的侦听回调。watch选项期望接受一个对象，其中键是需要侦听的响应式组件实例属性 (例如，通过data或computed声明的属性)——值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。除了一个根级属性，键名也可以是一个简单的由点分隔的路径，例如a.b.c。注意，这种用法不支持复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源，可以使用命令式的$watch()API。值也可以是一个方法名称的字符串 (通过methods声明)，或包含额外选项的对象。