小草莓的博客

SPA 全称为 Single-Page Application，表示单页面应用程序。也就是说只有一个 HTML 文件的 Web 应用，我们通过 Vue 开发的项目其实就是典型的 SPA应用在单页面应用程序中，我们不会为每个路径创建多个 HTML 文件，而是使用 JavaScript 为同一页面上的不同路径呈现不同的组件。当从浏览器请求单页面应用程序时，就会下载一个 bundle.js 文件，该文件包含所有请求网站的已编译 JavaScript 代码。使用这种方法，浏览器会通过使用。

参考： Vue2 和 Vue3 响应式上有什么区别？ / 使用 Object.defineProperty() 来进行数据劫持有什么缺点？_vue 2响应式和vue 3响应式区别-优快云博客文档：Object.defineProperty() - JavaScript | MDN 作用：对一个对象进行操作的方法。可以为一个对象增加一个属性，同时也可以对一个属性进行修改和删除。 的问题主要有三个： 兼容性好，支持 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必

插槽 — Vue.js插槽 Slots | Vue.js在 Vue2.6.0 之后，使用v-slot或者语法糖#插槽名定义；在这之前使用slot="插槽名"定义。跟 v-on 和 v-bind 一样，v-slot 也有缩写，也就是把参数之前的所有内容(v-slot:) 替换为字符 #；下面是三种默认插槽的内容定义方式，并且最后一个默认插槽的内容会覆盖掉上一个插槽内容。使用 template 包裹内容，同时使用 v-slot 绑定一个名称。

⑤ useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件，defineExpose 对外暴露。在组件中可以直接使用这些属性和事件，无需在 props 和 emits 中声明。在模板中就可以直接使用它们。<script setup> 是 Vue3 的语法糖，简化了组合式 API 的写法，其实是。① 在 setup 中声明的属性和方法无需 return，就可以直接在模板使用；而 <script setup> 中的代码会在每次组件实例被创建的时候执行。

watch：既要指明要监听的属性，也要指明回调。不用指明监听哪个属性，回调中用到哪个属性，那就监听哪个属性。watchEffect 有点像计算属性 computed：但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值。而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值。与比较，watch懒执行副作用；更具体地说明什么状态应该触发侦听器重新运行；访问侦听状态变化前后的值。

总之，Redux、Vuex 和 Pinia 都提供了一种可预测的状态管理方案，并有其自身独特的优点。Pinia 适合那些想要一个简单、轻量级的状态管理库的开发者，而 Vuex 则适合那些需要更多功能和灵活性的开发者。具体选择哪一个取决于应用的复杂度、开发团队的技能水平和个人偏好等因素。如果是 Vue.js 3 的项目，可以考虑使用 Pinia，否则可以考虑 Vuex 或 Redux。

总之，Vuex 是 Vue.js 生态中的一个非常重要的插件，适用于中大型的 Vue.js 应用，它通过提供集中式的状态管理模式、响应式更新、单向数据流、模块化组织和辅助函数等特性，可以更好地组织和管理应用的状态，提高开发效率和代码质量。

是通过监听表单元素上的 input 或者 change 事件，然后再通过数据劫持 (Object.defineProperty) 将数据模型中的值与表单元素的值进行绑定。需要注意的是，虽然双向绑定在某些场景下提高了开发效率和用户体验，但是过多使用双向绑定可能会导致代码难以理解和维护。v-model 的实质是语法糖，它的内部会根据组件类型自动转换/解析成不同的事件和属性，默认是 input 和 value。，但是在表单交互中，双向数据绑定可以方便地将用户输入的数据同步到数据模型中，提高了用户体验。

③ 在目标组件中，可以使用 Vue 的生命周期函数 mounted 来。这样，当路由跳转到目标页面时，页面会自动滚动到指定的锚点位置。① 首先，在 Vue Router 的路由配置中，需要将。设置目标 URL 的 hash 部分为锚点的名称。scrollIntoView方法将其滚动到视图中。获取目标描点的 DOM 元素。mode 设置为 hash。② 在页面跳转时，使用。

同时需要注意在使用 History 模式时，需要保证所有路由的访问路径都指向 index.html，否则仍然会出现404错误。这些配置将确保在 Vue 应用程序中使用 history 模式时，服务器能够正确地处理所有路由请求，并返回正确的页面。这段代码会将所有请求都指向根目录下的 index.html 文件，让前端路由来处理 URL 请求。具体的配置方式取决于对应项目使用的服务器环境，常见的有 Apache、Nginx 等。以将所有请求都代理到 Vue 应用程序的入口文件。

总之使用 History 模式需要对后端进行相关配置，并且需要特别注意安全性和兼容性问题，同时在打包发布时需要正确配置 publicPath，确保页面资源路径正确。

这些导航钩子提供了灵活的路由跳转控制机制，可以方便地实现各种复杂的路由跳转需求。同时，VueRouter 还提供了一些其他的导航钩子和高级特性，比如路由元信息、动态路由、命名路由等，可以进一步提高开发效率和应用的可维护性。三、全局守卫、路由独享守卫、组件内置守卫的区别。

在 Vue 和 React 中，也有使用到闭包的地方。在 Vue 和 React 中，由于都是响应式框架，会自动处理视图的更新，而这个过程中也会用到闭包。

在 Vue 2 中，当一个对象被设置为响应式对象时，会通过 Object.defineProperty() 方法把每个属性都转换成 getter和 setter，当属性值发生变化时，会触发 setter，进而通知所有引用该属性的组件更新视图。Vue 3 中使用了递归遍历 Proxy 对象的属性，因此在访问嵌套属性时会更加方便和高效，而 Vue2 则需要通过 watch 或 computed 等方式才能实现嵌套属性的响应式。监听到属性的删除和新增，而且能够直接监听数组的变化，不需要对数组进行特殊的处理。

Vue 3.0 中，每次更新时会将新旧 VNode 数组缓存起来，只对数组中不同的 VNode 进行比对，减少比对次数，提升性能。Vue 3.0 中，对于动态删除操作，采用了异步队列的方式进行，能够将多个删除操作合并为一个，减少 DOM 操作，提升性能。总的来说，Vue 3.0 的 diff 算法相比 Vue 2.0 更加高效，能够减少不必要的 DOM 操作，提升应用的性能。Vue 3.0 中，编译器会对静态节点进行标记，在更新时可以直接跳过这些静态节点，减少 DOM 操作，提升性能。

Vue 可以使用 watch 和 computed 监听数组的变化。

Vue2 是同层比较新老 vnode ，新的不存在老的存在就删除，新的存在老的不存在就创建，子节点采用双指针头对尾两端对比的方式，全量 diff，然后移动节点时通过 splice 进行数组操作。相比 Vue 的自动化， React 则是基于状态，单向数据流，数据不可变，需要手动 setstate 来更新，而且当数据改变时会以组件根为目录，默认全部重新渲染整个组件树，只能额外用。运行时才递归，用到才代理。React 的生命周期包含了10个钩子函数，其中有些钩子函数是过时的，也有一些新的钩子函数被引入。

总结来说，Scoped CSS通过为样式选择器添加唯一的属性选择器，限定样式规则的作用范围，使得样式只作用于特定的组件或元素。这种方式可以避免样式冲突，提高样式隔离性，是前端框架中常用的一种样式隔离解决方案。

插槽是利用 slot 进行占位。在使用组件时，传入的组件内容也就是HTML片段，会分发的对应的 slot 中。

例如，不管父组件传入的属性 allow-clear 是 true 还是 false，生效的都是 true。指的是将在父组件中定义的属性会传递给子组件，子组件中不需要声明 props 或者 emit。指的是将在父组件中定义的属性会传递给子组件，不需要在子组件中声明 props。若子组件的根元素上已经有了 class 属性，那它会和从父组件上继承的值。这些透传进来的 attribute 可以在模板的表达式中直接用。如果父组件传入属性，子组件中声明了相同的属性。访问一个组件的所有透传 attribute；

watch用于监听特定数据的变化，并在数据变化时执行相应的操作；可以监听某个数据的变化，也可以监听多个数据的变化；适合处理异步操作或复杂的数据变化逻辑；通过watch监听的数据发生变化时，可以执行一些异步操作、复杂逻辑计算或手动操作DOM 等；computedcomputed用于基于响应式依赖进行动态计算，并返回计算结果。依赖于响应式数据，只有当依赖的数据发生改变时，computed才会重新计算。适合进行简单的数据计算、筛选、排序等操作。由于computed。

如果使用数组的下标作为 key 值，虽然可以满足每个元素 key 值唯一的需求但是由于 Vue 的更新机制是基于 diff 算法实现的，使用数组下标作为 key 值会导致 Vue 无法正确地判断列表中元素的变化情况。使用 index 作为 key 和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2...这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。例如，当删除列表中某个元素时，其后面的所有元素的下标都会发生改变，导致后面的每个项都会被重新渲染。

DOM diff 本质上就是在数据响应式的场景下，降低了用户对 DOM 的直接操作。Vue2、Vue3 和 React 底层都有用到 DOM diff，它们的相同点呢，都是同级比对，复杂度差不多；那不同点呢，一个是节点移动的方向。比如 React 是从左向右移动，而 Vue2 是双端 diff,也就是指针是两边向中间移动的。而 Vue3 在 Vue2 双端 diff 的基础上，加上了最长递增子序列优化算法。

综上所述，Vue 中组件的加载和渲染顺序是先加载父组件，再递归地加载子组件，然后按照深度优先遍历的方式渲染子组件，再依次向上渲染父组件。

2、查看是否安装成功（查看webpack版本号）4、查看是否安装成功（查看vue版本号）5、使用 vue-cli 来构建项目。1、全局安装webpack。3、全局安装vue-cli。1、项目的初始化、、

父组件(errorCaptured) -> 子组件 (errorCaptured) -> 当孙子组件出错时，错误会一直向上抛，也就是先触发子组件的 errorCaptured，然后触发父组件的 errorCaptured。原理：Vue底层源码会在很多地方都做了错误处理，例如在渲染的时候出错或者数据初始化的时候出错都会触发handleError方法，传入错误信息和实例等；如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。

如果两个节点不相同的话，那么直接删除老节点，然后创建新节点。如果是相同节点，那么会比较两个节点的差异，包括节点的 key 属性、tag 标签、事件等等；如果两个父节点相同的话，那么就比较儿子节点。比较子节点有以下4种情况：如果都是文本节点且不相等，直接将el文本节点更新为新节点的文本内容即可；如果老的有儿子，新的没儿子，直接删除老的儿子节点；如果老的没儿子，新的有儿子，那么就创造新的儿子节点，直接插入父节点中；如果两者都有子节点，则执行函数比较子节点。

虚拟 DOM 是真实 DOM 的 JS 对象，是对真实 DOM 的抽象，至少包含标签名（tagName）、标签的属性（props）以及子标签列表（children）如下图，左侧是虚拟 DOM，对应的虚拟DOM就是右侧的JS对象。基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象，也就是现在大家所熟知的 VNode 和 VDOMVue 中 diff 算法原理_小草莓蹦蹦跳的博客-优快云博客。

include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）

一、什么是Vue生命周期？二、Vue生命周期的作用是什么？三、Vue2.x生命周期1、总共有几个阶段？2、第一次进入页面/组件，会触发哪几个钩子？3、在哪个阶段有$el，哪个阶段有$data？4、DOM 渲染在哪个周期中就已经完成？5、如果加入了keep-alive，会多什么生命周期？6、如果加入了keep-alive，第一次进入组件会执行哪些生命周期？7、如果加入了keep-alive，第二次后者第N次进入组件会执行哪些生命周期？8、捕获一个来自子孙组件的错误时

综上所述，hash 模式适用于简单的前端开发，不需要特殊后端配置，对兼容性要求较高，但在 SEO 方面存在一定的问题。而history 模式则适用于需要更友好的 URL 格式和更好的 SEO 支持的项目，但需要服务器端进行相应的配置。选择哪种模式取决于具体的项目需求和技术要求。

1、自定义切换焦点指令v-focus2、自定义防抖指令 v-debounce-click:ms3、自定义节流指令 v-throttle-click:ms4、函数式组件5、Vue3 + Vue-cli (1) 基础篇6、Vue3+ Vue-cli (2) 组件篇

1、封装获取鼠标坐标组合函数2、在具有CSS作用域的Vue单文件组件设置全局CSS样式3、渲染函数4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇

1、优化性能的指令2、切换器3、异步操作4、实现本地存储函数5、Vue3 + Vue-cli (1) 基础篇6、Vue3+ Vue-cli (2) 组件篇

1、下一次DOM更新2、DOM传送门3、Effect 作用域API4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇

1、动态CSS2、阻止事件冒泡3、自定义修饰符4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇

目录1、shallowRef 和 shallowReactive2、Dependency Injection 依赖注入3、生命钩子函数4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇

1、watch全家桶2、Prop验证3、原始值API4、Vue3 + Vue-cli (1) 基础篇5、Vue3+ Vue-cli (2) 组件篇

/ 后端增加 CSRF 防御机制，对请求头 Origin/Referer 进行校验，开发模式下 devServer 的代理需要修改 Origin/Referer 规避校验。如果后端增加 CSRF 防御机制，对请求头 Origin/Referer 进行校验。2、修改 headers 中的 Origin 和 Referer 规避校验。排查 proxyTable 对象中配置的 target 是否正确。Host 和 Referer 是本地地址，若正确，那可能就是请求头的问题。重新启动项目，就正常了~~

1、 jsonplaceholder官网地址：http://jsonplaceholder.typicode.com/文档说明：https://blog.youkuaiyun.com/lhjuejiang/article/details/81288321