青春木鱼的博客

永远不要把v-if和v-for同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）；如何避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

SourceMap是一种映射文件，它可以将编译后的代码映射回原始的源代码。在Vue开发中，我们通常会将Vue组件的单文件(.vue)编译成JavaScript文件，使用SourceMap可以将编译后的JavaScript代码映射回原始的Vue组件代码，方便我们进行调试。

jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript 程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业余爱好者还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习jQuery。

vue中$watch()和watch属性都是监听值的变化的，是同一个作用，但是有两个不同写法。

相信大家在开发项目中，有时候会遇到一些需求，是当一个数据改变之后进行一些操作，这个时候有些人会设置一个定时器，周期性的去循环访问，当发现数据发生了改变后执行操作。但是这种操作方式会导致系统资源的浪费，以及更新的不及时等。因此vue通过watch（侦听器）提供了一个更通用的方法来响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

命名空间的作用是为了减少模块之间定义的方法命名冲突的问题。默认state是局部命名空间 ，mutation、action、getter 是全局命名空间。比如说在a模块getter 中定义一个getter1，在b模块getter 中也定义一个getter1 ,在同一空间内，拥有两个相同的名称，程序会报错。

IntersectionObserver 之前就有所了解，但是一直没有用，当时觉得浏览器兼容性不好，直接用onscroll监听也能实现相关功能，但是随着浏览器支持性越来越好，这个属性到迄今为止，可以用在大部分的正式项目中了，对于提升性能和用户体验，起到一定作用。

Webpack和Vite是两个常用的前端构建工具，它们在设计理念和实现方式上存在一些区别。

JS中的展开运算符怎样应用？展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。

在 vue 或者 react 前端项目中，我们经常会在入口模板文件 index.html 中看到用 %PUBLIC_URL%、、 之类的变量插入。但这似乎我们平时的 html 或者 javscript 压根没见过这类的写法，一时感觉超出了自己的知识盲区。

我们创建vue项目时，通常会涉及到选择代码检测和格式化方案，该如何挑选适合自己的个性化配置？本文就来谈谈 ESLint 各个模式的编码规范，以便大家根据自身情况进行选取。

前端的技术发展速度非常的快，异步请求也是其重要的体现之一，从最早的原生XHR，再到JqueryAjax的统治时代，再到近来，fetch、axios等技术也开始出现并大量投入使用。其实有这么多种的请求方法和解决方案，总结一下：原生XHR几乎很少开发会用，JqueryAjax属于老当益壮的那种，虽然很老，但是很好用，Fetch是属于初生牛犊，还需要慢慢成长，axios就目前来说，算是非常好的了，无脑使用即可。

介绍一个生产级的流程管理工具 PM2，通常我们说到 PM2 的时候，都是在说如何部署 Node.js 程序，但是实际上 PM2 很强大，不仅仅可以用来管理 Node.js，它还可以用来管理 Python、PHP、Ruby、perl 等等。但是，在部署之前，我们还需要安装nodejs

用npm run serve运行vue项目时，出现报错："export 'default' (imported as 'VueRouter') was not found in 'vue-router'

Hooks是一个新的React特性提案，组件尽量写成纯函数，如果需要外部React特性（比如状态管理，生命周期），就用钩子把外部特性"钩"进来，通常函数名字都是以use开头。首次在v16.7.0-alpha版本中添加，在v16.8.0中正式发布它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题

在项目部署时，我们需要在测试环境和生产环境使用不同的变量。vue-cli提供了vue-cli-service build打包命令，然而vue-cli-service build默认的环境变量值则为production。那我们通过npm run build打包构建，想要实现不同环境使用不同变量，暂时不能实现。

babel 会在当前执行目录搜索 babel.config.js, 若有则读取并作为全局配置，若无则全局配置为空。然后在转换一个具体的js文件时会去判断，如果这个文件在当前执行目录外面，则只应用全局配置。如果这个文件在当前执行路径内，则会去基于这个文件向上搜索最近的一个 .babelrc ，将其与全局配置合并作为转换这个文件的配置。

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

Vue-cli3项目之Vue.config.js配置文件—取代vue-cli2中build与config

解决vue 通过name和params 进行页面传参时，刷新页面参数丢失问题以及vue路由实现可选参数

当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。

要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。

这篇文章主要介绍了Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决，具有很好的参考价值，希望对大家有所帮助

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击 a标签链接。vue项目中点击router-link标签链接都属于声明式导航。在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()。

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。

v-bind是数据绑定，没有双向绑定效果，但不一定在表单元素上使用，任何有效元素上都可以使用；v-model是双向绑定，基本上只用在表单元素上；当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高，而且需区分这个元素是单个的还是一组出现的。

单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。

使用vue-cli2.x脚手架为每个vue项目创建脚手架项目结构，项目结构目录中每个文件夹的介绍

尽管 Webpack 有大量的插件和社区支持，但是从很多方面来说，如今它算不上是最好的选择。就个人而言，我更喜欢Vite，因为它有效地解决了上述所有问题，不仅配置与 Parcel 一样简单，而且还可以使用 ESM。另外，上面列出的四个打包程序质量都很高。

webpack 是一个全能选手，啥都能干，只是有点复杂，对新手不太友好。Rollup 是后起之秀，打包更简洁。vite 把 rollup 变成了“开袋即食”，便于新手入门。create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。

构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。

这篇文章主要为大家介绍了Vue项目的打包方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助！

vue-cli是基于nodejs+webpack封装的命令行工具。你可以理解为汇集了各种命令的 bash，或者bat。用vue-cli执行build，实际上是webpack做的。原本需要自己配置webpack的相关配置，被cli简化了。并且按照vue的用户习惯整理了一套构建和目录规范。

vue-cli 3.0的项目摈弃了 config 、 build 、 static 目录，新增了 public 目录，将根目录下的 index.html 放置在 public 目录下。新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容.新增 ba

在开发vue项目的过程中，经常会对某些页面或全局项目的路由进行监听，当路由发生变化的时候去执行某些操作，因此本文总结了监听路由的几种方式

Vue和Vue-Router中的name没有直接联系，是两个不同的概念！

Vue-Router导航（路由）守卫就是路由跳转前、中、后过程中的一些钩子函数，本文详细的介绍了Vue中路由守卫的具体使用——vue-router钩子函数实现路由守卫，具有一定的参考价值，对vue感兴趣的同学可以参考一下

这篇文章主要为大家详细介绍了vue路由守卫和keep-alive，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助！

路由导航守卫中document.title = to.meta.title的作用以及Vue路由跳转时如何更改页面title