vue20针对seo首屏解析_Vue常识点面试必备根本到进阶覆盖vue30持续更新整理

文章目录 [+]

深入理解：监听器 Observer：对数据工具进行遍历，包括子属性工具的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。
这样的话，给这个工具的某个值赋值，就会触发 setter，那么就能监听到了数据变革。
解析器 Compile：解析 Vue 模板指令，将模板中的变量都更换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到关照，调用更新函数进行数据更新。
订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，紧张的任务是订阅 Observer 中的属性值变革的，当收到属性值变革的时，触发解析器 Compile 中对应的更新函数。
每个组件实例都有相应的 watcher 实例工具，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会关照 watcher 重新打算，从而致使它关联的组件得以更新——这是一个范例的不雅观察者模式订阅器 Dep：订阅器采取发布-订阅设计模式，用来网络订阅者 Watcher，对监听器 Observer 和订阅者 Watcher 进行统一管理。
你知道Vue3.x相应式数据事理吗？Vue3.x改用Proxy替代Object.defineProperty。
由于Proxy可以直接监听工具和数组的变革，并且有多达13种拦截方法。
并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理工具的第一层，Vue3是若何处理这个问题的呢？判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理，这样就实现了深度不雅观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理工具target自身属性，也可以判断旧值与新值是否相等，只有知足以上两个条件之一时，才有可能实行trigger。
Proxy 与 Object.defineProperty 利害比拟Proxy 的上风如下:Proxy 可以直接监听工具而非属性；Proxy 可以直接监听数组的变革；Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；Proxy 返回的是一个新工具,我们可以只操作新的工具达到目的,而 Object.defineProperty 只能遍历工具属性直接修正；Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也便是传说中的新标准的性能红利；Object.defineProperty 的上风如下:兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明须要等到下个大版本( 3.0 )才能用 Proxy 重写。
VUEX篇Vuex 是什么？

利用到了js设计模式中的单例模式，单例模式想要做到的是，不管我们考试测验去创建多少次，它都只给你返回第一次所创建的那唯一的一个实例。

Vuex 是一个专为 Vue.js 运用程序开拓的状态管理模式。
每一个 Vuex 运用的核心便是 store（仓库）。
“store” 基本上便是一个容器，它包含着你的运用中大部分的状态 ( state )。
Vuex 的状态存储是相应式的。
当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变革，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一路子便是显式地提交 (commit) mutation。
这样使得我们可以方便地跟踪每一个状态的变革。

Vuex 利用单一状态树，用一个工具就包含了全部的运用层级状态。
至此它便作为一个“唯一数据源 (SSOT)”而存在。
这也意味着，每个运用将仅仅包含一个 store 实例。
单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得全体当前运用状态的快照。
——Vuex官方文档

vue20针对seo首屏解析_Vue常识点面试必备根本到进阶覆盖vue30持续更新整理 vue20针对seo首屏解析_Vue常识点面试必备根本到进阶覆盖vue30持续更新整理搜狗SEO

紧张包括以下几个模块：State：定义了运用状态的数据构造，可以在这里设置默认的初始状态。
Getter：许可组件从 Store 中获取数据，mapGetters 赞助函数仅仅是将 store 中的 getter 映射到局部打算属性。
Mutation：是唯一变动 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：许可将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
什么情形下利用 Vuex？如果运用够大略，最好不要利用 Vuex，一个大略的 store 模式即可须要构建一个中大型单页运用时，利用Vuex能更好地在组件外部管理状态Vuex和纯挚的全局工具有什么差异？Vuex 的状态存储是相应式的。
当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变革，那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。
改变 store 中的状态的唯一路子便是显式地提交 (commit) mutation。
这样使得我们可以方便地跟踪每一个状态的变革，从而让我们能够实现一些工具帮助我们更好地理解我们的运用。
为什么 Vuex 的 mutation 中不能做异步操作？Vuex中所有的状态更新的唯一路子都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变革，从而让我们能够实现一些工具帮助我们更好地理解我们的运用。
每个mutation实行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。
如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
新增：vuex的action有返回值吗？返回的是什么？store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 PromiseAction 常日是异步的，要知道 action 什么时候结束或者组合多个 action以处理更加繁芜的异步流程，可以通过定义action时返回一个promise工具，就可以在派发action的时候就可以通过处理返回的 Promise处理异步流程

一个 store.dispatch 在不同模块中可以触发多个 action 函数。
在这种情形下，只有当所有触发函数完成后，返回的 Promise 才会实行。

vue20针对seo首屏解析_Vue常识点面试必备根本到进阶覆盖vue30持续更新整理 vue20针对seo首屏解析_Vue常识点面试必备根本到进阶覆盖vue30持续更新整理搜狗SEO

（图片来自网络侵删）

新增：为什么不直接分发mutation,而要通过分发action之后提交 mutation变更状态mutation 必须同步实行，我们可以在 action 内部实行异步操作可以进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副浸染（即状态变更）常规篇computed 和 watch 的差异和利用的场景？computed：是打算属性，依赖其它属性值，并且 computed 的只有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新打算 computed 的值；watch：没有缓存性，更多的是「不雅观察」的浸染，类似于某些数据的监听回调，每当监听的数据变革时都会实行回调进行后续操作；当我们须要深度监听工具中的属性时，可以打开deep：true选项，这样便会对工具中的每一项进行监听利用场景：当我们须要进行数值打算，并且依赖于其它数据时，该当利用 computed，由于可以利用 computed 的缓存特性，避免每次获取值时，都要重新打算；当我们须要在数据变革时实行异步或开销较大的操作时，该当利用 watch，利用watch选项许可我们实行异步操作 ( 访问一个 API )，限定我们实行该操作的频率，并在我们得到终极结果前，设置中间状态。
这些都是打算属性无法做到的。
Vue2.x组件通信有哪些办法？父子组件通信事宜机制(父->子props,子->父 $on、$emit)获取父子组件实例 $parent、$childrenRef 获取实例的办法调用组件的属性或者方法Provide、inject (不推举利用，组件库时很常用)兄弟组件通信Vue.prototype.$bus = new VueVuexeventBus 这种方法通过一个空的 Vue实例作为中心事宜总线（事宜中央），用它来触发事宜和监听事宜，从而实现任何组件间的通信，包括父子、隔代、兄弟组件跨级组件通信Vuex$attrs、$listenersProvide、inject说一下v-if和v-show的差异当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)，切换当前DOM的显示和隐蔽。
v-if 适用于在运行时很少改变条件，不须要频繁切换条件的场景；v-show 则适用于须要非常频繁切换条件的场景。
为什么 v-for 和 v-if 不建议用在一起当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能摧残浪费蹂躏这种场景建议利用 computed，先对数据进行过滤组件中的data为什么是一个函数？一个组件被复用多次的话，也就会创建多个实例。
实质上，这些实例用的都是同一个布局函数。
如果data是工具的话，工具属于引用类型，会影响到所有的实例。
所以为了担保组件不同的实例之间data不冲突，data必须是一个函数。
子组件为什么不可以修正父组件通报的Prop？/怎么理解vue的单向数据流？Vue提倡单向数据流,即父级props的更新会流向子组件,但是反过来则弗成。
这是为了防止意外的改变父组件状态，使得运用的数据流变得难以理解。
如果毁坏了单向数据流，当运用繁芜时，debug 的本钱会非常高。
v-model是如何实现双向绑定的？v-model是用来在表单控件或者组件上创建双向绑定的他的实质是v-bind和v-on的语法糖在一个组件上利用v-model，默认会为组件绑定名为value的prop和名为input的事宜nextTick的实现事理是什么？不才次 DOM 更新循环结束之后实行延迟回调，在修正数据之后立即利用 nextTick 来获取更新后的 DOM。
nextTick紧张利用了宏任务和微任务。
根据实行环境分别考试测验采取Promise、MutationObserver、setImmediate，如果以上都弗成则采取setTimeout定义了一个异步方法，多次调用nextTick会将方法存入行列步队中，通过这个异步方法清空当前行列步队。
Vue不能检测数组的哪些变动？Vue 怎么用 vm.$set() 办理工具新增属性不能相应的问题？Vue 不能检测以下数组的变动：第一类问题// 法一：Vue.setVue.set(vm.items, indexOfItem, newValue)// 法二：Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)复制代码第二类问题，可利用 splice：vm.items.splice(newLength)复制代码当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修正数组的长度时，例如：vm.items.length = newLength办理办法：vm.$set 的实现事理是：如果目标是数组，直策应用数组的 splice 方法触发相应式；如果目标是工具，会先判读属性是否存在、工具是否是相应式，终极如果要对属性进行相应式处理，则是通过调用 defineReactive 方法进行相应式处理（ defineReactive 方法便是 Vue 在初始化工具时，给工具属性采取 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）Vue事宜绑定事理是什么？原生事件绑定是通过addEventListener绑定给真实元素的，组件事宜绑定是通过Vue自定义的$on实现的。
说一下虚拟Dom以及key属性的浸染由于在浏览器中操作DOM是很昂贵的。
频繁的操作DOM，会产生一定的性能问题。
这便是虚拟Dom的产生缘故原由。
Virtual DOM实质便是用一个原生的JS工具去描述一个DOM节点。
是对真实DOM的一层抽象。
(也便是源码中的VNode类，它定义在src/core/vdom/vnode.js中。
)虚拟 DOM 的实现事理紧张包括以下 3 部分：用 JavaScript 工具仿照真实 DOM 树，对真实 DOM 进行抽象；diff 算法 — 比较两棵虚拟 DOM 树的差异；pach 算法 — 将两个虚拟 DOM 工具的差异运用到真正的 DOM 树。
key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速，更准确：由于带 key 就不是就地复用了，在 sameNode 函数a.key === b.key比拟中可以避免就地复用的情形。
以是会更加准确。
更快速：利用 key 的唯一性天生 map 工具来获取对应节点，比遍历办法更快为什么不建议用index作为key?不建议用index 作为 key，和没写基本上没差异，由于不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用缺点的旧子节点，做很多额外的事情生命周期篇说一下你对Vue的生命周期的理解大略回答beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
keep-alive 有自己独立的钩子函数 activated 和 deactivated。
繁芜回答

生命周期

发生了什么beforeCreate在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问created在实例创建完成后发生，当前阶段已经完成了数据不雅观测，也便是可以利用数据，变动数据，在这里变动数据不会触发updated函数。
可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问DombeforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。
而当前阶段虚拟Dom已经创建完成，即将开始渲染。
在此时也可以对数据进行变动，不会触发updatedmounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，利用$refs属性对Dom进行操作beforeUpdate发生在更新之前，也便是相应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行变动数据，不会造成重渲染updated发生在更新完成之后，当前阶段组件Dom已完成更新。
要把稳的是避免在此期间变动数据，由于这可能会导致无限循环的更新beforeDestroy发生在实例销毁之前，在当前阶段实例完备可以被利用，我们可以在这时进积善后扫尾事情，比如打消计时器 destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。
组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁activited keep-alive 专属组件被激活时调用deactivated keep-alive 专属组件被销毁时调用

Vue中组件生命周期调用顺序是什么样的？组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
在什么阶段才能访问操作DOM？

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，以是在 mounted 中可以访问操作 DOM。

你的接口要求一样平常放在哪个生命周期中？可以在钩子函数 created、beforeMount、mounted 中进行调用，由于在这三个钩子函数中，data 已经创建，可以将做事端端返回的数据进行赋值。
但是推举在 created 钩子函数中调用异步要求，由于在 created 钩子函数中调用异步要求有以下优点：能更快获取到做事端数据，减少页面loading 韶光；ssr不支持 beforeMount 、mounted 钩子函数，以是放在 created 中有助于同等性；路由篇vue路由hash模式和history模式实现事理分别是什么，他们的差异是什么？hash 模式：#后面 hash 值的变革，不会导致浏览器向做事器发出要求，浏览器不发出要求，就不会刷新页面通过监听 hashchange 事宜可以知道 hash 发生了哪些变革，然后根据 hash 变革来实现更新页面部分内容的操作。
history 模式：history 模式的实现，紧张是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，但是不会发送要求。
这样就可以监听 url 变革来实现更新页面部分内容的操作差异url 展示上，hash 模式有“#”，history 模式没有刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一样平常须要后端将所有页面都配置重定向到首页路由兼容性，hash 可以支持低版本浏览器和 IE。
路由首先解析模版，天生AST语法树(一种用JavaScript工具的形式来描述全体模板)。
利用大量的正则表达式对模板进行解析，碰着标签、文本的时候都会实行对应的钩子进行干系处理。
Vue的数据是相应式的，但实在模板中并不是所有的数据都是相应式的。
有一些数据首次渲染后就不会再变革，对应的DOM也不会变革。
那么优化过程便是深度遍历AST树，按照干系条件对树节点进行标记。
这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化浸染。
编译的末了一步是将优化后的AST树转换为可实行的代码。
diff算法说一下同级比较，再比较子节点先判断一方有子节点一方没有子节点的情形(如果新的children没有子节点，将旧的子节点移除)比较都有子节点的情形(核心diff)递归比较子节点说说你对keep-alive组件的理解keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：一样平常结合路由和动态组件一起利用，用于缓存组件；供应 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，个中 exclude 的优先级比 include 高；对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。
说说你对SSR的理解SSR也便是做事端渲染，也便是将Vue在客户端把标签渲染成HTML的事情放在做事端完成，然后再把html直接返回给客户端SSR的上风更好的SEO首屏加载速率更快SSR的缺陷开拓条件会受到限定，做事器端渲染只支持beforeCreate和created两个钩子当我们须要一些外部扩展库时须要分外处理，做事端渲染运用程序也须要处于Node.js的运行环境更多的做事端负载你都做过哪些Vue的性能优化？编码阶段只管即便减少data中的数据，data中的数据都会增加getter和setter，会网络对应的watcherv-if和v-for不能连用如果须要利用v-for给每项元素绑定事宜时利用事宜代理SPA 页面采取keep-alive缓存组件在更多的情形下，利用v-if替代v-showkey担保唯一利用路由

源自：https://juejin.im/post/5ec358126fb9a0432a3c49e6

声明：文章著作权归作者所有，如有侵权，请联系小编删除。