小草莓的博客

如果有 params，就 new URLSearchParams() 对象，并把传进来的 params 传到对象里；再用 toString 方法转成 URL 编码字符串，最后再拼接 url 来覆盖 url 默认值。如果有 data，就 xhr.setRequestHeader 设置请求头的请求数据类型；比如 JSON 字符串，就还需要用 JSON.stringify 转成 JSON 字符串。new XMLHttpRequest 并设置默认请求方式、请求根路径；添加请求+响应事件；

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 绑定一个名称。

总之，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 等方式才能实现嵌套属性的响应式。监听到属性的删除和新增，而且能够直接监听数组的变化，不需要对数组进行特殊的处理。

总的来说，Vue3 在性能、可维护性和特性上都有所提升。但是我们在开发中需要注意的是，由于 API 发生了较大的变化，因此 Vue3 与 Vue2 之间并不完全兼容，需要进行相应的迁移工作。

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

在 keep-alive 组件中，子组件的 mounted 钩子只会在组件被首次渲染时执行，当组件被缓存并再次激活时，子组件的 mounted 钩子不会再次执行，而是执行 activated 钩子。父组件 beforeDestroy 钩子 => 子组件 beforeDestroy 钩子 => 子组件 destroyed 钩子 => 父组件 destroyed 钩子。父组件 beforeDestroy 钩子 => 子组件 beforeDestroy 钩子 =>

而 keep-alive 是一个用来缓存组件的抽象组件，它自身没有任何展示效果，只是将内部包含的组件缓存起来，从而能够在需要时快速地切换到缓存的组件。当一个组件第一次被挂载时，mounted 生命周期会被触发，同时 keep-alive 中的缓存组件还没有被渲染，因此 activated 生命周期并不会被触发。只有当一个被缓存的组件被激活后（比如从其他页面返回到该组件所在的页面），activated 生命周期才会被触发。在优先级上， mounted 生命周期高于 activated 生命周期。

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

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

emit 第二个参数为传递的数值。

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

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

总之，Vue Router 是实现 Vue.js 单页应用路由控制的核心组件之一，它通过路由匹配、路由模式、路由导航、路由组件等多个方面实现了完整的路由控制逻辑，为开发者提供了强大的路由控制能力。

举个例子，当我们通过 push() 方法向一个数组中添加元素时，Vue2 会检测到这个数组发生了变化，并通知 Vue 视图更新相关数据。Vue2 在这些方法中添加了特定的代码，以便通知 Vue 视图更新数据。例如直接修改数组中某个元素的值，Vue2 就无法监听到这个变化。这个操作不需要我们手动去更新视图，Vue2 会帮我们完成。需要注意的是，如果我们使用非响应式的方式来更新数组，所以我们需要遵循 Vue2 的修改数组的规范，这些方法都是可以改变原数组的。为了实现数据响应式更新，

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 中组件的加载和渲染顺序是先加载父组件，再递归地加载子组件，然后按照深度优先遍历的方式渲染子组件，再依次向上渲染父组件。

为了提高用户的体验性，使用指令 v-cloak，搭配着 CSS 一起使用，在加载时隐藏挂载内容，等到加载完毕再显示渲染后的数据。先通过样式隐藏挂载内容，等到数据渲染完成后，v-cloak属性会自动去除，页面会显示最终效果。② 在 css 中设置 v-cloak 的属性为 display: none。用于解决当网络加载很慢或者频繁渲染页面时，页面显示出源代码的情况。① 在插值语法所在的标签处加上v-cloak指令。v-cloak 指令常用在插值表达式的标签中，

父组件(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 算法原理_小草莓蹦蹦跳的博客-优快云博客。

【代码】Vue.js 双向数据绑定的具体实现代码（完善版）

对每个元素节点的指令进行扫描跟解析，根据指令模板替换数据，以及绑定相应的更新函数。创建 watcher 时触发getter。可能出现多次，每次都需要收集出来用⼀个。来维护它们，此过程称为依赖收集多个。先来一个构造函数：执行初始化，对。② 初始化视图时读取某个。来管理，需要更新时由。触发时，便可通过对应。

【代码】简单实现“数据变化更新视图，视图变化更新数据”（MVVM）

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

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

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

1、自定义加载中效果https://blog.youkuaiyun.com/qq_38290251/article/details/95489262http://huruji.github.io/loading/demo/loading.htmlhttps://projects.lukehaas.me/css-loaders/2、html页面注入环境变量若是生产环境，则加载的Vue和...

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