关于前端:vue最全知识点基础到进阶覆盖vue30建议收藏

说说你对 MVVM 的了解

Model-View-ViewModel 的缩写，Model 代表数据模型，View 代表 UI 组件,ViewModel 将 Model 和 View 关联起来
数据会绑定到 viewModel 层并主动将数据渲染到页面中，视图变动的时候会告诉 viewModel 层更新数据

理解 mvc/mvp/mvvm 的区别

Vue2.x 响应式数据 / 双向绑定原理

Vue 数据双向绑定次要是指：数据变动更新视图，视图变动更新数据 。其中，View 变动更新 Data，能够通过事件监听的形式来实现，所以 Vue 数据双向绑定的工作次要是如何 依据 Data 变动更新 View。
简述：
当你把一个一般的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并应用 Object.defineProperty 把这些 property 全副转为 getter/setter。
这些 getter/setter 对用户来说是不可见的，然而在外部它们让 Vue 可能追踪依赖，在 property 被拜访和批改时告诉变更。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会告诉 watcher，从而使它关联的组件从新渲染。

深刻了解：
监听器 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 是什么？

使用到了 js 设计模式中的单例模式，单例模式想要做到的是，不论咱们尝试去创立多少次，它都只给你返回第一次所创立的那惟一的一个实例。

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。每一个 Vuex 利用的外围就是 store（仓库）。“store”基本上就是一个容器，它蕴含着你的利用中大部分的状态 (state)。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地失去高效更新。
扭转 store 中的状态的惟一路径就是显式地提交 (commit) mutation。这样使得咱们能够不便地跟踪每一个状态的变动。

Vuex 应用繁多状态树，用一个对象就蕴含了全副的利用层级状态。至此它便作为一个“惟一数据源 (SSOT)”而存在。这也意味着，每个利用将仅仅蕴含一个 store 实例。繁多状态树让咱们可能间接地定位任一特定的状态片段，在调试的过程中也能轻易地获得整个以后利用状态的快照。——Vuex 官网文档

次要包含以下几个模块：
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 仍旧返回 Promise
Action 通常是异步的，要晓得 action 什么时候完结或者组合多个 action 以解决更加简单的异步流程，能够通过定义 action 时返回一个 promise 对象，就能够在派发 action 的时候就能够通过解决返回的 Promise 解决异步流程

一个 store.dispatch 在不同模块中能够触发多个 action 函数。在这种状况下，只有当所有触发函数实现后，返回的 Promise 才会执行。

新增：为什么不间接散发 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、$children
Ref 获取实例的形式调用组件的属性或者办法
Provide、inject (不举荐应用，组件库时很罕用)
兄弟组件通信

Vue.prototype.$bus = new Vue
Vuex
eventBus 这种办法通过 一个空的 Vue 实例作为地方事件总线（事件核心），用它来触发事件和监听事件，从而实现任何组件间的通信，包含父子、隔代、兄弟组件
跨级组件通信
Vuex
$attrs、$listeners
Provide、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.set Vue.set(vm.items, indexOfItem, newValue) // 法二：Array.prototype.splice vm.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

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

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。

路由懒加载是什么意思？如何实现路由懒加载？

路由懒加载的含意：把不同路由对应的组件宰割成不同的代码块，而后当路由被拜访的时候才加载对应组件
实现：联合 Vue 的异步组件和 Webpack 的代码宰割性能

能够将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件自身)

const Foo = () => Promise.resolve({ /* 组件定义对象 */})

2. 在 Webpack 2 中，咱们能够应用动静 import 语法来定义代码分块点 (split point)

import('./Foo.vue') // 返回 Promise

联合这两者，这就是如何定义一个可能被 Webpack 主动代码宰割的异步组件

const Foo = () => import('./Foo.vue') const router = new VueRouter({routes: [ { path: '/foo', component: Foo} ]})

应用命名 chunk，和 webpack 中的魔法正文就能够把某个路由下的所有组件都打包在同个异步块 (chunk) 中

chunkconst Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

Vue-router 导航守卫有哪些

全局前置 / 钩子：beforeEach、beforeResolve、afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
- *

说说 vue 和 react 的异同

同
应用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中放弃在外围库，而将其余性能如路由和全局状态治理交给相干的库。
异
在 React 利用中，当某个组件的状态发生变化时，它会以该组件为根，从新渲染整个组件子树（除非应用 PureComponent/shouldComponentUpdate），在 Vue 利用中，组件的依赖是在渲染过程中主动追踪的，所以零碎能准确通晓哪个组件的确须要被重渲染
在 React 中，一切都是 JavaScript。不仅仅是 HTML 能够用 JSX 来表白，当初的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来解决
Vue 的路由库和状态治理库都是由官网保护反对且与外围库同步更新的。React 则是抉择把这些问题交给社区保护，因而创立了一个更扩散的生态系统，所以有更丰盛的生态系统
Vue 提供了 CLI 脚手架，能让你通过交互式的脚手架疏导非常容易地构建我的项目。你甚至能够应用它疾速开发组件的原型。React 在这方面也提供了 create-react-app，然而当初还存在一些局限性
React Native 能使你用雷同的组件模型编写有本地渲染能力的 APP，Vue 和 Weex 会进行官网单干，Weex 是阿里巴巴发动的跨平台用户界面开发框架，同时也正在 Apache 基金会进行我的项目孵化，另一个抉择是 NativeScript-Vue，一个用 Vue.js 构建齐全原生利用的 NativeScript 插件

什么是 mixin？

Mixin 使咱们可能为 Vue 组件编写可插拔和可重用的性能。
如果你心愿再多个组件之间重用一组组件选项，例如生命周期 hook、办法等，则能够将其编写为 mixin，并在组件中简略的援用它。
而后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。

在 Vue 实例中编写生命周期 hook 或其余 option/properties 时，为什么不应用箭头函数？

箭头函数自已没有定义 this 上下文中。
当你在 Vue 程序中应用箭头函数 (=>) 时，this 关键字病不会绑定到 Vue 实例，因而会引发谬误。所以强烈建议改用规范函数申明。

Vue 模版编译原理晓得吗，能简略说一下吗？

简略说，Vue 的编译过程就是将 template 转化为 render 函数的过程。会经验以下阶段（生成 AST 树 / 优化 /codegen）：

首先解析模版，生成 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，会收集对应的 watcher
v-if 和 v -for 不能连用
如果须要应用 v -for 给每项元素绑定事件时应用事件代理
SPA 页面采纳 keep-alive 缓存组件
在更多的状况下，应用 v -if 代替 v -show
key 保障惟一
应用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动静加载
图片懒加载
SEO 优化
预渲染
服务端渲染 SSR
打包优化
压缩代码
Tree Shaking/Scope Hoisting
应用 cdn 加载第三方模块
多线程打包 happypack
splitChunks 抽离公共文件
sourceMap 优化
用户体验
骨架屏
PWA
还能够应用缓存 (客户端缓存、服务端缓存) 优化、服务端开启 gzip 压缩等。

vue2.x 中如何监测数组变动？

应用了函数劫持的形式，重写了数组的办法，Vue 将 data 中的数组进行了原型链重写，指向了本人定义的数组原型办法，当调用数组 api 时，能够告诉依赖更新。
如果数组中蕴含着援用类型，会对数组中的援用类型再次递归遍历进行监控。这样就实现了监测数组变动。

说说你对 SPA 单页面的了解，它的优缺点别离是什么？

SPA（single-page application）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载实现，SPA 不会因为用户的操作而进行页面的从新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，防止页面的从新加载。
长处：
用户体验好、快，内容的扭转不须要从新加载整个页面，防止了不必要的跳转和反复渲染；
基于下面一点，SPA 绝对对服务器压力小；
前后端职责拆散，架构清晰，前端进行交互逻辑，后端负责数据处理；
毛病：
首次加载耗时多：为实现单页 Web 利用性能及显示成果，须要在加载页面的时候将 JavaScript、CSS 对立加载，局部页面按需加载；
后退后退路由治理：因为单页利用在一个页面中显示所有的内容，所以不能应用浏览器的后退后退性能，所有的页面切换须要本人建设堆栈治理；
SEO 难度较大：因为所有的内容都在一个页面中动静替换显示，所以在 SEO 上其有着人造的弱势。

对于行将到来的 vue3.0 个性你有什么理解的吗？

监测机制的扭转
3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言笼罩的反馈性跟踪。
打消了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限度：
只能监测属性，不能监测对象
检测属性的增加和删除；
检测数组索引和长度的变更；
反对 Map、Set、WeakMap 和 WeakSet。
模板
模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会从新渲染，而 3.0 把作用域插槽改成了函数的形式，这样只会影响子组件的从新渲染，晋升了渲染的性能。
同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来不便习惯间接应用 api 来生成 vdom。
对象式的组件申明形式
vue2.x 中的组件是通过申明的形式传入一系列 option，和 TypeScript 的联合须要通过一些装璜器的形式来做，尽管能实现性能，然而比拟麻烦。
3.0 批改了组件的申明形式，改成了类式的写法，这样使得和 TypeScript 的联合变得很容易
其它方面的更改
反对自定义渲染器，从而使得 weex 能够通过自定义渲染器的形式来扩大，而不是间接 fork 源码来改的形式。
反对 Fragment（多个根节点）和 Protal（在 dom 其余局部渲染组建内容）组件，针对一些非凡的场景做了解决。
基于 tree shaking 优化，提供了更多的内置性能。#### 说说你对 MVVM 的了解
Model-View-ViewModel 的缩写，Model 代表数据模型，View 代表 UI 组件,ViewModel 将 Model 和 View 关联起来
数据会绑定到 viewModel 层并主动将数据渲染到页面中，视图变动的时候会告诉 viewModel 层更新数据

理解 mvc/mvp/mvvm 的区别

Vue2.x 响应式数据 / 双向绑定原理

Vue 数据双向绑定次要是指：数据变动更新视图，视图变动更新数据 。其中，View 变动更新 Data，能够通过事件监听的形式来实现，所以 Vue 数据双向绑定的工作次要是如何 依据 Data 变动更新 View。
简述：
当你把一个一般的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并应用 Object.defineProperty 把这些 property 全副转为 getter/setter。
这些 getter/setter 对用户来说是不可见的，然而在外部它们让 Vue 可能追踪依赖，在 property 被拜访和批改时告诉变更。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会告诉 watcher，从而使它关联的组件从新渲染。

深刻了解：
监听器 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 是什么？

使用到了 js 设计模式中的单例模式，单例模式想要做到的是，不论咱们尝试去创立多少次，它都只给你返回第一次所创立的那惟一的一个实例。

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。每一个 Vuex 利用的外围就是 store（仓库）。“store”基本上就是一个容器，它蕴含着你的利用中大部分的状态 (state)。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地失去高效更新。
扭转 store 中的状态的惟一路径就是显式地提交 (commit) mutation。这样使得咱们能够不便地跟踪每一个状态的变动。

Vuex 应用繁多状态树，用一个对象就蕴含了全副的利用层级状态。至此它便作为一个“惟一数据源 (SSOT)”而存在。这也意味着，每个利用将仅仅蕴含一个 store 实例。繁多状态树让咱们可能间接地定位任一特定的状态片段，在调试的过程中也能轻易地获得整个以后利用状态的快照。——Vuex 官网文档

次要包含以下几个模块：
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 仍旧返回 Promise
Action 通常是异步的，要晓得 action 什么时候完结或者组合多个 action 以解决更加简单的异步流程，能够通过定义 action 时返回一个 promise 对象，就能够在派发 action 的时候就能够通过解决返回的 Promise 解决异步流程

一个 store.dispatch 在不同模块中能够触发多个 action 函数。在这种状况下，只有当所有触发函数实现后，返回的 Promise 才会执行。

新增：为什么不间接散发 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、$children
Ref 获取实例的形式调用组件的属性或者办法
Provide、inject (不举荐应用，组件库时很罕用)
兄弟组件通信

Vue.prototype.$bus = new Vue
Vuex
eventBus 这种办法通过 一个空的 Vue 实例作为地方事件总线（事件核心），用它来触发事件和监听事件，从而实现任何组件间的通信，包含父子、隔代、兄弟组件
跨级组件通信
Vuex
$attrs、$listeners
Provide、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.set Vue.set(vm.items, indexOfItem, newValue) // 法二：Array.prototype.splice vm.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

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

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。

路由懒加载是什么意思？如何实现路由懒加载？

路由懒加载的含意：把不同路由对应的组件宰割成不同的代码块，而后当路由被拜访的时候才加载对应组件
实现：联合 Vue 的异步组件和 Webpack 的代码宰割性能

能够将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件自身)

const Foo = () => Promise.resolve({ /* 组件定义对象 */})

2. 在 Webpack 2 中，咱们能够应用动静 import 语法来定义代码分块点 (split point)

import('./Foo.vue') // 返回 Promise

联合这两者，这就是如何定义一个可能被 Webpack 主动代码宰割的异步组件

const Foo = () => import('./Foo.vue') const router = new VueRouter({routes: [ { path: '/foo', component: Foo} ]})

应用命名 chunk，和 webpack 中的魔法正文就能够把某个路由下的所有组件都打包在同个异步块 (chunk) 中

chunkconst Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

Vue-router 导航守卫有哪些

全局前置 / 钩子：beforeEach、beforeResolve、afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
- *

说说 vue 和 react 的异同

同
应用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中放弃在外围库，而将其余性能如路由和全局状态治理交给相干的库。
异
在 React 利用中，当某个组件的状态发生变化时，它会以该组件为根，从新渲染整个组件子树（除非应用 PureComponent/shouldComponentUpdate），在 Vue 利用中，组件的依赖是在渲染过程中主动追踪的，所以零碎能准确通晓哪个组件的确须要被重渲染
在 React 中，一切都是 JavaScript。不仅仅是 HTML 能够用 JSX 来表白，当初的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来解决
Vue 的路由库和状态治理库都是由官网保护反对且与外围库同步更新的。React 则是抉择把这些问题交给社区保护，因而创立了一个更扩散的生态系统，所以有更丰盛的生态系统
Vue 提供了 CLI 脚手架，能让你通过交互式的脚手架疏导非常容易地构建我的项目。你甚至能够应用它疾速开发组件的原型。React 在这方面也提供了 create-react-app，然而当初还存在一些局限性
React Native 能使你用雷同的组件模型编写有本地渲染能力的 APP，Vue 和 Weex 会进行官网单干，Weex 是阿里巴巴发动的跨平台用户界面开发框架，同时也正在 Apache 基金会进行我的项目孵化，另一个抉择是 NativeScript-Vue，一个用 Vue.js 构建齐全原生利用的 NativeScript 插件

什么是 mixin？

Mixin 使咱们可能为 Vue 组件编写可插拔和可重用的性能。
如果你心愿再多个组件之间重用一组组件选项，例如生命周期 hook、办法等，则能够将其编写为 mixin，并在组件中简略的援用它。
而后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。

在 Vue 实例中编写生命周期 hook 或其余 option/properties 时，为什么不应用箭头函数？

箭头函数自已没有定义 this 上下文中。
当你在 Vue 程序中应用箭头函数 (=>) 时，this 关键字病不会绑定到 Vue 实例，因而会引发谬误。所以强烈建议改用规范函数申明。

Vue 模版编译原理晓得吗，能简略说一下吗？

简略说，Vue 的编译过程就是将 template 转化为 render 函数的过程。会经验以下阶段（生成 AST 树 / 优化 /codegen）：

首先解析模版，生成 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，会收集对应的 watcher
v-if 和 v -for 不能连用
如果须要应用 v -for 给每项元素绑定事件时应用事件代理
SPA 页面采纳 keep-alive 缓存组件
在更多的状况下，应用 v -if 代替 v -show
key 保障惟一
应用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动静加载
图片懒加载
SEO 优化
预渲染
服务端渲染 SSR
打包优化
压缩代码
Tree Shaking/Scope Hoisting
应用 cdn 加载第三方模块
多线程打包 happypack
splitChunks 抽离公共文件
sourceMap 优化
用户体验
骨架屏
PWA
还能够应用缓存 (客户端缓存、服务端缓存) 优化、服务端开启 gzip 压缩等。

vue2.x 中如何监测数组变动？

应用了函数劫持的形式，重写了数组的办法，Vue 将 data 中的数组进行了原型链重写，指向了本人定义的数组原型办法，当调用数组 api 时，能够告诉依赖更新。
如果数组中蕴含着援用类型，会对数组中的援用类型再次递归遍历进行监控。这样就实现了监测数组变动。

说说你对 SPA 单页面的了解，它的优缺点别离是什么？

SPA（single-page application）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载实现，SPA 不会因为用户的操作而进行页面的从新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，防止页面的从新加载。
长处：
用户体验好、快，内容的扭转不须要从新加载整个页面，防止了不必要的跳转和反复渲染；
基于下面一点，SPA 绝对对服务器压力小；
前后端职责拆散，架构清晰，前端进行交互逻辑，后端负责数据处理；
毛病：
首次加载耗时多：为实现单页 Web 利用性能及显示成果，须要在加载页面的时候将 JavaScript、CSS 对立加载，局部页面按需加载；
后退后退路由治理：因为单页利用在一个页面中显示所有的内容，所以不能应用浏览器的后退后退性能，所有的页面切换须要本人建设堆栈治理；
SEO 难度较大：因为所有的内容都在一个页面中动静替换显示，所以在 SEO 上其有着人造的弱势。

对于行将到来的 vue3.0 个性你有什么理解的吗？

监测机制的扭转
3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言笼罩的反馈性跟踪。
打消了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限度：
只能监测属性，不能监测对象
检测属性的增加和删除；
检测数组索引和长度的变更；
反对 Map、Set、WeakMap 和 WeakSet。
模板
模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会从新渲染，而 3.0 把作用域插槽改成了函数的形式，这样只会影响子组件的从新渲染，晋升了渲染的性能。
同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来不便习惯间接应用 api 来生成 vdom。
对象式的组件申明形式
vue2.x 中的组件是通过申明的形式传入一系列 option，和 TypeScript 的联合须要通过一些装璜器的形式来做，尽管能实现性能，然而比拟麻烦。
3.0 批改了组件的申明形式，改成了类式的写法，这样使得和 TypeScript 的联合变得很容易
其它方面的更改
反对自定义渲染器，从而使得 weex 能够通过自定义渲染器的形式来扩大，而不是间接 fork 源码来改的形式。
反对 Fragment（多个根节点）和 Protal（在 dom 其余局部渲染组建内容）组件，针对一些非凡的场景做了解决。
基于 tree shaking 优化，提供了更多的内置性能。

说说你对 MVVM 的了解

Vue2.x 响应式数据 / 双向绑定原理

你晓得 Vue3.x 响应式数据原理吗？

Proxy 与 Object.defineProperty 优劣比照

VUEX 篇

Vuex 是什么？

什么状况下应用 Vuex？

Vuex 和单纯的全局对象有什么区别？

为什么 Vuex 的 mutation 中不能做异步操作？

新增：vuex 的 action 有返回值吗？返回的是什么？

新增：为什么不间接散发 mutation, 而要通过散发 action 之后提交 mutation 变更状态

惯例篇

computed 和 watch 的区别和使用的场景？

Vue2.x 组件通信有哪些形式？

说一下 v -if 和 v -show 的区别

为什么 v-for 和 v-if 不倡议用在一起

组件中的 data 为什么是一个函数？

子组件为什么不能够批改父组件传递的 Prop？/ 怎么了解 vue 的单向数据流？

v-model 是如何实现双向绑定的？

nextTick 的实现原理是什么？

Vue 不能检测数组的哪些变动？Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？

Vue 事件绑定原理是什么？

说一下虚构 Dom 以及 key 属性的作用

为什么不倡议用 index 作为 key?

生命周期篇

说一下你对 Vue 的生命周期的了解

Vue 中组件生命周期调用程序是什么样的？

在什么阶段能力拜访操作 DOM？

你的接口申请个别放在哪个生命周期中？

路由篇

vue 路由 hash 模式和 history 模式实现原理别离是什么，他们的区别是什么？

前面 hash 值的变动，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面

路由懒加载是什么意思？如何实现路由懒加载？

Vue-router 导航守卫有哪些

进阶篇

说说 vue 和 react 的异同

什么是 mixin？

在 Vue 实例中编写生命周期 hook 或其余 option/properties 时，为什么不应用箭头函数？

Vue 模版编译原理晓得吗，能简略说一下吗？

diff 算法说一下

说说你对 keep-alive 组件的理解

说说你对 SSR 的理解

你都做过哪些 Vue 的性能优化？

vue2.x 中如何监测数组变动？

说说你对 SPA 单页面的了解，它的优缺点别离是什么？

对于行将到来的 vue3.0 个性你有什么理解的吗？

Vue2.x 响应式数据 / 双向绑定原理

你晓得 Vue3.x 响应式数据原理吗？

Proxy 与 Object.defineProperty 优劣比照

VUEX 篇

Vuex 是什么？

什么状况下应用 Vuex？

Vuex 和单纯的全局对象有什么区别？

为什么 Vuex 的 mutation 中不能做异步操作？

新增：vuex 的 action 有返回值吗？返回的是什么？

新增：为什么不间接散发 mutation, 而要通过散发 action 之后提交 mutation 变更状态

惯例篇

computed 和 watch 的区别和使用的场景？

Vue2.x 组件通信有哪些形式？

说一下 v -if 和 v -show 的区别

为什么 v-for 和 v-if 不倡议用在一起

组件中的 data 为什么是一个函数？

子组件为什么不能够批改父组件传递的 Prop？/ 怎么了解 vue 的单向数据流？

v-model 是如何实现双向绑定的？

nextTick 的实现原理是什么？

Vue 不能检测数组的哪些变动？Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？

Vue 事件绑定原理是什么？

说一下虚构 Dom 以及 key 属性的作用

为什么不倡议用 index 作为 key?

生命周期篇

说一下你对 Vue 的生命周期的了解

Vue 中组件生命周期调用程序是什么样的？

在什么阶段能力拜访操作 DOM？

你的接口申请个别放在哪个生命周期中？

路由篇

vue 路由 hash 模式和 history 模式实现原理别离是什么，他们的区别是什么？

前面 hash 值的变动，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面

路由懒加载是什么意思？如何实现路由懒加载？

Vue-router 导航守卫有哪些

进阶篇

Vue 不能检测数组的哪些变动？Vue 怎么用 `vm.$set()` 解决对象新增属性不能响应的问题？

Vue 不能检测数组的哪些变动？Vue 怎么用 `vm.$set()` 解决对象新增属性不能响应的问题？