Amouzy的博客

什么是虚拟DOM?virtual DOM 虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

一、加购效果动图二、前提条件三、开始操作四、解决vuex刷新数据丢失问题五、最终效果

Vuex核心概念：1、State1）全局state2）使用modules中的state2、Getters1）全局Getters2）使用modules中的getters3、Mutations1）全局Mutations2）使用modules中的mutations（namespaced:true）4、Actions1）全局Actions2）使用modules中的actions（namespaced:true）5、有无modules的目录结构对比

Vuex的概念核心概念Vuex 的使用场景1、组件之间的数据共享2、复杂状态的管理3、异步操作的处理

vuex的相关操作：一、安装vuex：二、项目配置VUEX：三、创建相关文件：1、state2、getters3、mutations4、actions5、modules

1、安装脚手架工具2、检查是否安装成功3、通过脚手架创建项目（可以选择vue2或vue3）

一、Vue3 的 script 现在支持三种写法：1、最基本的 Vue2 写法2、setup() 属性3、 script setup二、如何使用 script setup 编写组件1、data2、methods3、props4、emits 事件5、computed6、watch7、生命周期

6.此时会有提示，根据提示依次输入以下内容。其中vite-project是自己刚刚设置的项目名，而我没有修改所以用的是默认的。3.输入以下命令查询电脑是否已经安装了node.js，此时需注意node版本需要>=12.0.0才能让Vite正常运行。1.随便创建一个文件夹，用来放项目。我这里创建的文件夹名称是my-vite。2.在当前目录的路径显示框输入cmd,快速打开cmd命令窗口。到这里，一个简单的vue+vite项目就搭建完成了。

一、前提条件二、手动搭建vue项目的步骤：1. 创建项目2. 生成package.json文件3. 引入webpack和创建webpack.config.js文件4. 创建index.html，main.js文件5. 使用webpack命令编译6. 引入vue2，修改index.html，main.js文件7. 引入babel8. 再次执行webpack命令，完成搭建三、Webpack的常用配置

在做前端项目时，如果没有测试数据，可以通过mock来生成模拟数据。记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。根据数据模板生成模拟数据。记录数据模板。

方法：使用vue-helper插件查看函数定义处的快捷键：快捷键ctrl+左键（按住ctrl键，左键点击函数），即可跳转到函数定义处。返回查看之前的快捷键：想要返回跳转前的位置（即回退到上一个光标处），也很简单：快捷键alt+左箭头安装插件步骤：1.点击左边活动栏最下边的插件按钮2.输入“vue-helper”3.安装4.此时界面如下：使用效果：有这个插件，你还用 “ctrl+f”一个个查看来找函数定义的位置吗，是不是很神奇？（我之前习惯于用webstorm，尤其是做vue项目

Failed to resolve directive: (found in