青春木鱼的博客

在项目中使用 ref 时有时候直接取值，有时候返回的却是一个数组，不知其中缘由，后查了一下 ref 用法，所以总结一下。

Vuex官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

首先一定要明白，自定义指令其实就是一个对象！只是该对象中包含了类似组件生命周期钩子的函数而已，如created，mounted，该钩子函数会收到当前DOM元素作为参数，从而可以使用该DOM元素进行操作。

Promise对象是ES6（ ECMAScript 2015 ）对于异步编程提供的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Object.defineProperty只能遍历对象属性进行劫持，Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的。在 Vue 中，Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。Object.defineProperty 只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。

Vue2.x和Vue3.x的双向绑定原理详解

𝑛𝑒𝑥𝑡𝑇𝑖𝑐𝑘是𝑉𝑢𝑒.𝑗𝑠框架中的一个重要方法，它用于在下次𝐷𝑂𝑀更新循环结束之后执行延迟回调。

性能优化，是每一个开发者都会遇到的问题，特别是现在越来越重视体验，以及竞争越来越激烈的环境下，对于我们开发者来说，只完成迭代，把功能做好是远远不够的，最重要的是把产品做好，让更多人愿意使用，让用户用得更爽，这不也是我们开发者价值与能力的体现吗？重视性能问题，优化产品的体验，比起改几个无关痛痒的 bug 要有价值得多。

在实现Vue移动端适配方面，主要依赖于视口单位（Viewport units）、Flexible.js、PostCSS插件、以及媒体查询（Media Queries）这几个关键技术和策略。其中，Flexible.js是一种广泛采用的解决方案，因为它能够动态改变根元素的字体大小，进而影响整个应用的布局。

要实现图片的懒加载，核心的方法包括：利用JavaScript监听滚动事件、通过getBoundingClientRect()判断图片是否进入可视区域、使用Intersection Observer API、结合data属性暂存图片地址。在现代浏览器中，推荐使用Intersection Observer API来实现图片的懒加载，因为它相比传统的事件监听方式更为高效且易于维护。

在编写vue单文件的大多数情况下，我们都是使用template模板来创建HTML。然而在一些条件判断比较复杂的场景下，使用JavaScript去描绘HTML的生成逻辑会显得更加的简洁直观。

Vue.js中的$forceUpdate()方法‌是一个内置方法，用于强制Vue组件重新渲染。当Vue的响应式系统无法自动检测到某些数据变化时，或者在某些特定情况下，需要手动触发组件的重新渲染，这时$forceUpdate()方法就非常有用了。这个方法会绕过Vue的响应式检测机制，直接触发组件的重新渲染过程，影响调用该方法的Vue实例本身及其插入插槽内容的子组件，但不会影响其他子组件。尽管$forceUpdate()可以解决一些特定的问题，但过度使用或滥用可能会导致性能问题，因为它会忽略Vue的依赖追踪机制

vue2的响应式原理使用的是对象代理去实现的，对象代理中有一个get和set方法，当我们访问对象的时候就会触发get方法，当我们对对象中的值进行修改时会触发set方法。但是当我们给对象添加一个新的属性时对象代理是检测不到的，所以就会出现直接给对象添加属性响应式不生效的问题。

提到extends继承，最先想到的可能是ES6中的class、TS中的interface、面向对象编程语言中中的类和接口概念等等，但是我们今天的关注点在于：如何在Vue中使用extends继承特性。

async/await 是 ES8(ECMAScript 2017) 引入的新语法，用来简化Promise异步操作。在 async/await 出现之前，开发者只能通过链式 .then() 的方式处理Promise异步操作

Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点： * （1）对象的状态不受外界影响。 * （2）一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。

Vuex 官网 ： Vuex 是一个专为 Vue.js 应用程序设计的状态管理库，它提供了一种集中式管理 应用中的状态；状态管理模式： 它让组件的状态(数据)，管理变得集中、有序，便于在整个应用中，共享和维护数据；集中式存储： 它将应用的所有组件状态(数据)，集中到一个单一的存储对象中，使得统一管理；

Vuex 通过结合 Vue.js 的响应式系统实现了状态的响应式。Vuex 的状态存储于 Vue 的 data 对象中，这确保了对状态的任何 mutation 都是响应式的。

JQuery ​与Vue.js的主要区别在于它们的设计理念、工作原理、侧重点、DOM操作方式、数据驱动、组件化、生态系统、学习曲线以及虚拟DOM的使用。

refInFor：如果你在渲染函数中给多个元素都应用了相同的 ref 名，那么 `$refs.myRef` 会变成一个数组。vue中的refInFor属性是Vue框架中用于在循环渲染的元素上设置引用的一种方式。‌

Vue.js是一个渐进式的JavaScript框架，‌这意味着开发者可以根据项目的需求逐步引入和使用框架的各种功能，‌同时保持项目的可维护性和可扩展性。‌

这篇文章主要介绍了Vue中ref的用法及演示，ref被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上，下面来看看文章的详细内容，需要的朋友可以参考一下。

这篇文章主要介绍了Vue中$refs的用法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下。

永远不要把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，它主要包含从编码、发布到运维的整个前端研发生命周期，把软件工程相关的方法和思想应用到前端开发。

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用浏览器无法直接打开的问题