最全Vue知识点（基础到进阶，覆盖vue3）

基础篇

说说你对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篇

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 的代码分割功能

• 1.     能够将异步组件定义为返回一个 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 优化，提供了更多的内置功能。