WebStorm文件模板和代码片段 文件模板点击设置选择编辑器里面的文件和代码模板选择文件类型点击加号来添加文件模板代码片段点击设置选择编辑器里面的文件和代码模板选择实时模板选择指定语言点击加号，选择实时模板添加代码片段注意选择适用范围，设置错的话不起作用

解决在Vue项目中修改Svg颜色不生效 原因是svg源代码中fill设置了固定颜色解决方案，将fill设置成currentColorfill="currentColor"

ubuntu部署Nuxt3 安装pm2npm i -g pm2可能会出现npm低的问题，按照以下命令升级npmnpm install -g npm@9.6.5 to update检查npm是否升级成功npm -v升级成功之后重新安装pm2检查是否安装成功pm2 --version设置自启动pm2 startup pm2 save安装nginx更新源sudo apt-get update安装nginxsudo apt-get install -y nginx如果忘记了nginx的程序目录，可以运行此目录查看whereis nginxNginx如果指定默认加载/etc/nginx/nginx.conf的配置文件。如果要查看加载的是哪个配置文件，可以用这个命令sudo nginx -t或者ps -ef | grep nginxnginx的常用命令sudo service nginx {start | stop | restart | reload | force-reload | status | configtest | rotate | upgrade }参考文章：https://juejin.cn/post/6844903954132779016安装gitsudo apt-get install -y git检查是否安装成功git --version全局配置自己个人信息git config --global user.name '用户名' git config --global user.email '邮箱'查看配置结果git config --global -l配置ssh提示：如果 C:\Users\Administrator.ssh文件夹下面之前创建过公钥私钥，把里面的文件清空ssh-keygen -t rsa -C "邮箱"输入完之后需要按几次回车然后在github中添加公钥，就可以随意的拉取推送代码啦！参考文章：https://blog.csdn.net/weixin_60353902/article/details/125962025Nuxt3部署拉去完之后安装依赖npm install在项目根目录打包npm run build打包完成之后通过pm2运行项目pm2 start node --name "项目名称" -- .output/server/index.mjs参考文章：https://nuxt.com/docs/getting-started/deploymenthttps://juejin.cn/post/6844903954132779016设置nginx反向代理因为nuxt3默认启动端口是3000，在不改变默认端口的情况下，如果只想用户访问域名不加端口号的情况下就可以访问到该网站，可以设置反向代理，用户默认访问80端口的时候可以代理成3000端口。在nginx的默认80配置文件中的 **localtion /**下面添加以下代码proxy_pass http://127.0.0.1:3001/;参考文章：http://www.phonegap100.com/athreadinfo_7335.html反向代理完成之后出现的问题就是css和图片找不到，需要在默认配置文件中添加一些配置location ~ .*\.(js|css)?$ { expires 12h; proxy_pass http://172.16.90.232:86; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)?$ { expires 12h; proxy_pass http://172.16.90.232:86; }参考文章：https://www.cnblogs.com/minseo/p/15508433.html不出意外的话就成功啦！

Vue常见面试题 vue-router导航守卫有哪些？全局前置钩子：beforeEach、beforeResolve、afterEach路由独享守卫：beforeEnter组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave为什么Vue3.0采用了Proxy，抛弃了Object.defineProperty？Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。Vue2是通过递归+遍历data对象来实现对数据的监控的。如果属性值也是对象那么就需要深度遍历，显然如果能劫持一个完整的对象才是更好的选择。Proxy可以劫持整个对象，并返回一个新的对象。Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。V-for为什么要加key？如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/服用相同类型元素的算法。key是Vue中vnode的唯一标记，通过这个key，可以让diff操作可以更准确、更快速。如何从真实DOM到虚拟DOM？涉及到Vue中的模板编译原理，主要过程：将模板转换成ast树，ast用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）优化树将ast树生成代码为什么Vue采用异步渲染？Vue是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能，Vue会在本轮数据更新后，在异步更新视图。核心思想nextTick。为什么Vue组件中的data必须是一个函数？对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data也会被修改。而使用返回对象的函数，由于每次返回的都是一个新对象，引用地址不同，则不会出现这个问题。MVC和MVVM的区别？MVCmvc全名是Model View Controller，是模型-视图-控制器的缩写，一种软件设计典范Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。View（视图）：是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的。Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据，mvc的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话就是在Controller里面把Model的数据赋值给View。MVVMmvvm新增了vm类ViewModel层：做了两件事达到了数据的双向绑定，将模型转化成视图，即将后端传递额数据转化成所看到的页面。实现的方式是：数据绑定。将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听。mvvm与mvc的最大区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作DOM元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。Vue data中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？不会立即同步执行重新渲染。Vue实现响应式并不是数据发生变化后DOM立即变化，而是按一定的策略进行DOM的更新。Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。Vue的优点轻量级框架，只关注视图层，是一个构建数据的视图集合简单易学双向数据绑定组件化视图、数据、结构分离，使数据的更改更为简单虚拟DOM运行速度更快nextTick是什么？Vue实现响应式并不是在数据发生变化后立即更新DOM，使用nextTick是在下次DOM更新循环结束之后立即执行延迟回调。在修改数据之后使用则可以在回调中获取更新后的DOM。Vue的生命周期beforeCreate：实例初始化之后，数据观测之前调用created：实例创建完成之后调用beforeMount：挂载之前调用mounted：挂载完成调用beforeUpdate：数据更新之前调用updated：数据更新之后调用beforeDestroy：实例销毁之前调用destroyed：实例销毁之后调用v-if和v-show的共同点和不同点？共同点：都能控制元素的显示和隐藏。不同点：v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过display:none来控制元素的显示和隐藏。如何让CSS只在当前组件中起作用？在组件中的style标签中加上scoped<keep-alive></keep-alive>的作用是什么？keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。Vue中常用的指令和它的用法v-model 双向数据绑定v-for 循环v-if v-show 显示与隐藏v-on 绑定事件v-once 只绑定一次vue-loader是什么？ 使用它的用途有哪些？vue文件的一个解析器，将template、js、style转换成js模块。用途：js可以写生es6，style样式可以scss或less，template可以加jade等。v-model的使用v-model用于表单数据的双向绑定，其实它就是一个语法糖，背后做了两个操作：v-bind绑定一个value属性，v-on指令给当前元素绑定input事件。分别简述computed和watch的使用场景computed：当一个属性受多个属性影响的时候就需要用到computed。watch：当一条数据影响多条数据的时候就需要用watch。v-on可以监听多个方法吗？可以，用{}对象的写法。渐进式框架的理解主张最少，可以根据不同的需求选择不同的层级。v-if和v-for的优先级v-if和v-for一起使用时，v-for比v-if的优先级更高，这意味着v-if将分别重复运行于每个v-for循环中，所以不推荐v-if和v-for同时使用。Vue常用修饰符.stop 等同于JavaScript中的event.stopPropagation()，防止事件冒泡.prevent 等同于JavaScript中的event.preventDefault()，防止执行预设的行为（标签的默认行为）.capture 与事件冒泡的方向相反，事件捕获由外到内.self 只会触发自己范围内的事件，不包含子元素.once 指挥触发一次Vue的两个核心点数据驱动，组件系统数据驱动：ViewModel，保证数据和视图的一致性。组件系统：应用类UI可以看作全部是由组件书构成的。SPA首屏加载慢如何解决？安装动态懒加载所需插件，使用动态懒加载。使用CDN资源。axios的特点有哪些？支持Promise API可以拦截请求和响应转换请求数据和响应数据取消请求自动换成json封装Vue组件的过程？建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。准备好组件的数据输入。即分析好逻辑，定好props里面的数据，类型。准备好组件的数据输出。即根据组件逻辑，做好要暴漏出来的方法。params和query的区别query在浏览器中显示参数，params不显示参数。query刷新页面之后不会丢失数据。params刷新页面会丢失数据。Vue初始化页面闪动的问题在Vue初始化之前，由于div是不归Vue管的，所有在代码还没有解析的情况下会容易出现花屏现象。解决方案：在css里加上 [v-cloak] { display:none }，如果没有彻底解决问题，则在根元素加上加上 style="display:none"Vue更新数组是触发视图更新的方法push()、pop()、shift()、unshift()、splice()、sort()、reverse()什么是Vue生命周期？ 有什么作用？每个Vue实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这个用户在不同阶段添加自己代码的机会，方便用户做一些逻辑处理。$route和$router的区别$router是VueRouter的实例，在script标签中想要导航到不同的URL，使用$router.push方法等。$route为当前router跳转对象，里面可以获取到当前路由的各种参数信息。VueX有哪几种属性？有5中，分别是state、getter、mutation、action、modulestate：基本数据，数据源存放地getters：从基本数据派生出来的数据mutations：提交更改数据的方法，同步更新action：像一个装饰器，包裹mutations，实现数据的异步更新modules：模块化VueX

JavaScript宏任务和微任务简单理解 宏任务 - macro task，又称为task，包括：script代码块I/OxhrsetTimeoutsetIntervalsetImmediateUI交互事件postMessage浏览器为了能够使得JS引擎跟UI引擎有序配合执行，会在每一个宏任务执行结束后，在下一个宏任务执行前，对页面进行重新渲染，执行流程为macro task(JS引擎) -> render(UI引擎) -> macro task(JS引擎)微任务 - micro task包括：Promise.thenawaitprocess.nextTickMutaionObserver执行流程为：micro task -> micro task -> ...注意：微任务总是在宏任务执行过程中产生的任务，它不能单独存在（微任务实际上是宏任务的一个步骤），可以理解为宏任务是微任务寄生的环境在同一个层级的任务中，微任务执行优先级要高于宏任务的优先级，如果不考虑同一个层级，那么比较微任务和宏任务的执行级别毫无意义在宏任务执行过程中产生的微任务，会在该宏任务结束前一次执行完毕微任务实际是宏任务的一个步骤，所有微任务会在下一个宏任务之前全部执行完毕在微任务执行过程中产生的微任务会直接添加到微任务队列的末端，并在下一个宏任务执行之前全部执行掉如果在微任务执行过程中产生的宏任务，则会进入到宏任务队列末尾，按照宏任务顺序在后面的事件循环中执行process.nextTick会在当前执行站的末尾，下一次Event loop之前出发回调函数，也就是说，它指定的任务总是发生在所有异步任务之前setTimeout单线程运行机制，同一时间只能做一件事。不管怎样，都是要等主线线程的流程中兴完毕后才会进行，且按照setTimeout设置的顺序进行排队执行。该函数指定的任务为宏任务，优先级低于process.nextTick()process.nextTick()nodejs的一个异步执行函数，效率比setTimeout更高，执行顺序要早于setTimeout,在主逻辑的末尾任务队列调用之前执行。setInterval()setInterval定时器函数，按照指定的周期不断调用函数。等主线程执行完毕后调用。和setTimeout执行时间一致时，按照设置的顺序来执行。process.nextTick和PromiseNode执行完所有同步任务，接下来就会执行process.nextTick的任务队列。如果你希望异步任务尽可能快地执行，那就使用process.nextTick。根据语言规格，Promise对象的回调函数，会进入异步任务里面的“微任务”(microtask)队列。微任务队列追加在process.nextTick队列的后面，也属于本轮循环。process.nextTick跟setImmediate区别可以把process.nextTick理解为往已经存在的事件队列头部插入任务，而setImmediate可以理解为吧任务添加到已经存在事件队列的末端。