vue 面试知识点汇总

min_pr
975 阅读18分钟

1. 概念

1.1. 说说你对 SPA 单页面的理解，它的优缺点分别是什么？

singer page application 单页面应用，仅在web页面初始化的时候加载相应的html、js和css，一旦页面加载完成，spa不会因为用户操作而进行页面的重新加载或跳转，取而代之的是利用路由机制实现html内容的变换，UI与用户交互，避免页面的重新加载。

优点：

  • 用户体验好，快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重新渲染
  • 相对服务器的压力小
  • 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

缺点：

  • 初次加载耗时多：为实现单页面web应用功能及显示效果，需要在加载页面时候将js、css统一加载，部分页面按需加载
  • 前进后退路由管理：由于单页面在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有页面切换需要自己建立堆栈管理
  • SEO难度大：所有内容都在一个页面中动态切换显示

1.2. 什么是 MVVM？

Model–View–ViewModel （MVVM） 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。

MVC:Model–View–Controller（MVC）模式.

MVVM:model view viewModel 视图模式。MVVM 的出现促进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率，MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

  • （1）View 层 View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建。
  <div id="app">
      <p>{{message}}</p>
      <button v-on:click="showMessage()">Click me</button>
  </div>
  • （2）Model 层 Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。
{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

-（3）ViewModel 层 ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。

var app = new Vue({
    el: '#app',
    data: {  // 用于描述视图状态   
        message: 'Hello Vue!', 
    },
    methods: {  // 用于描述视图行为  
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;
        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                vm.message = res;
            }
        });
    }
})

MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展现在 View 层，前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新。这样 View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

2. 基础

2.1. v-show 与 v-if 有什么区别？

v-show 通过控制display为none来实现显示和隐藏，不管条件是什么都会渲染，适用于频繁切换的场景

v-if 是真正的重新渲染，确保在每次切换的过程中条件块内的事件监听器和子组件都适当的销毁和创建；惰性渲染，直到条件第一次真的时候才开始渲染，适用不频繁切换

2.2. Class 与 Style 如何动态绑定？

  • class
    • 数组
  <div v-bind:class = ""></div>
  • 对象
  <div></div>
  • style
    • 数组
  • 对象

2.3. computed 和 watch 的区别和运用的场景？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取computed 的值时才会重新计算 computed 的值；

watch： 监听，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作； 运用场景：

  • 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
  • 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

3. 组件

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

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。

3.2. Vue 组件间通信有哪几种方式？

  • props和 $emit

    父子通信，父通过props向子传递数据，子通过$emit触发父级事件，父级监听事件获取值

  • ref和 $children/$parent

    父子通信

  • eventBus（$emit和$on）通信

    这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

  • $attrs和$listeners

    attrs获取没有列入props的数据，Listener获取所有事件，通过调取事件，执行回调函数

  • provide 和 inject 隔代

    祖先通过provide提供数据，隔代通过inject获取数据，跨级组件间建立了一种主动提供与依赖注入的关系

  • vuex

    全局变量, 状态管理模式

3.3. 谈谈你对 keep-alive 的了解？

通过keep-alive组件来实现缓存，切换组件的时候记录缓存，不重新渲染，可以保留离开状态，避免重复渲染，一般结合路由和动态组件一起使用，用于缓存组件； 通过activate和deactivated 两个钩子函数，被激活和被移除时

提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

4. 生命周期

4.1. 谈谈你对 Vue 生命周期的理解？

  • beforeCreate 组件实例被创建之初，组件的属性生效之前

  • created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，el 还不可用

  • beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。

  • mounted 实例被挂载后调用，这时 el 被新创建的 vm.el 替换了。 如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.el也在文档内。

  • beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

  • updated 由于数据更新导致虚拟DOM重新渲染和打补丁，在这之后调用该钩子。 当这个钩子被调用时，组件DOM已经更新，所有现在可以执行依赖于DOM的操作。 updated不会保证所有的子组件也都一起被重绘，如果希望等整个视图重绘完毕，可以在updated里面使用vm.$nextTick

  • beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。

  • destroyed 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

  • activated keep-alive 组件的相关事件，被keep-alive缓存的组件启用的时候调用

  • deactivated keep-alive 组件的相关事件，被keep-alive缓存的组件停掉的时候调用

  • errorCaptured

4.2. 在什么阶段才能访问操作DOM？

mounted

4.3. Vue 的父组件和子组件生命周期钩子函数执行顺序？

渲染

父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted

销毁

父beforeDestroy => 子beforeDestroy => 子destroy => 父destroy

4.4. 父组件可以监听到子组件的生命周期吗？

  1. 钩子函数
<Child @hook:mounted="doSomething" ></Child>
  1. emit 事件触发

4.5. 在哪个生命周期内调用异步请求？

created\beforeMount\mounted

5. 全家桶

5.1. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

核心概念和方法

  • State 单一状态树，包含了全部应用级状态，是唯一的数据源。 一般computed中计算，mapState
  • Getter 从state中派生一些状态，根据依赖进行缓存，只有依赖变化才重新计算，一般computed，mapGetters
  • Mutation 修改数据的方法 commit，methods， MapMutations
  • Action 异步方法 dispatch，methods，mapActions
  • Module 模块化

5.2. vue-router 路由模式有几种？

vue-router 有 3 种路由模式：hash、history、abstract，对应的源码如下所示：

switch (mode) {
  case 'history':
	  this.history = new HTML5History(this, options.base)
	  break
  case 'hash':
	  this.history = new HashHistory(this, options.base, this.fallback)
  	break
  case 'abstract':
	  this.history = new AbstractHistory(this, options.base)
  	break
  default:
	if (process.env.NODE_ENV !== 'production') {
	  assert(false, `invalid mode: ${mode}`)
	}
}
  • hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
  • history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
  • abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

5.3. 能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？

（1）hash 模式的实现原理 早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是URL 中 # 后面的内容。 hash 路由模式的实现主要是基于下面几个特性：

  • URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
  • hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
  • 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用  JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值； 我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

（2）history 模式的实现原理 HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：

  • history.pushState()
  • history.repalceState()。

这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

  window.history.pushState(null, null, path);
  window.history.replaceState(null, null, path);

我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；

history.pushState({color:'red'}, 'red', 'red')

window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}

history.back();

history.forward();

如果强制刷新等情况，需后端重返回到首页

6. 原理

6.1. 怎样理解 Vue 的单向数据流？（prop）

即：父组件通过prop向子组件传递数据，prop使得父子组件之间形成了一个单向下行的数据绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

目的： 防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 结果： 子组件的prop数据自动刷新，但是子组件内部不可更改prop值。 解决办法：如果想更新，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

有两种常见的试图改变一个 prop 的情形 :

  • 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}
  • 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

6.2. Vue 框架怎么实现对象和数组的监听？

底层原理：Object.defineProperty()对数据进行劫持。 整个数组和对象监听，vue能检测到对象和数组（部分方法操作）的变化

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])  // observe 功能为监测数据的变化
    }
  }

  /**
   * 对属性进行递归遍历
   */
  let childOb = !shallow && observe(val) // observe 功能为监测数据的变化

通过以上 Vue 源码部分查看，我们就能知道 Vue 框架是通过遍历数组和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。

6.3. Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？

背景： Vue无法检测到对象属性的添加或删除。而Vue会在初始化实例的时候对属性执行getter和setter转化，所以属性必须在data对象上存在才能让vue将它转化为响应式。

vue提供了Vue.set(Object,propertyName, value) / vm.$set(Object, propertyName, value)来实现为对象添加响应式属性

实现原理：

  • 如果目标是数组，直接使用数组的 splice 方法触发相应式；
  • 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

Vue 源码：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

6.4. 直接给一个数组项赋值，Vue 能检测到变化吗？

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

  • 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二个问题，Vue 提供了以下操作方法：

// Array.prototype.splice
vm.items.splice(newLength)

6.5. Vue 是如何实现数据双向绑定的？ 响应式原理，发布-订阅设计模式

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据，如下图所示：

即：

输入框内容变化时，Data 中的数据同步变化。即 View => Data 的变化。 Data 中的数据变化时，文本节点的内容同步变化。即 Data => View 的变化。

其中，View 变化更新 Data ，可以通过事件监听的方式来实现，所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。 Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

  • 实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
  • 实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
  • 实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。
  • 实现一个订阅器 Dep ：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

6.6. v-model 的原理？ 双向数据绑定

我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

  • text 和 textarea 元素使用 value 属性和 input 事件；
  • checkbox 和 radio 使用 checked 属性和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。
以 input  表单元素为例：
<input v-model='something'>
    
相当于

<input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

父组件：
<ModelChild v-model="message"></ModelChild>

子组件：
<div>{{value}}</div>

props:{
    value: String
},
methods: {
  test1(){
     this.$emit('input', '小红')
  },
},

6.7. 虚拟 DOM 实现原理？ *****

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象； diff 算法 — 比较两棵虚拟 DOM 树的差异； pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

6.8. 虚拟 DOM 的优缺点？

优点：

  • 保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
  • 无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
  • 跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。 缺点:
  • 无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

6.9. 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 重写。

6.10. Vue 中的 key 有什么作用？

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

它也可以用于强制替换元素/组件而不是重复使用它。

  • 完整地触发组件的生命周期钩子
  • 触发过渡

7. 优化

7.1. 你有对 Vue 项目进行哪些优化？

（1）代码层面的优化

  • v-if 和 v-show 区分使用场景
  • computed 和 watch 区分使用场景
  • v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
  • 长列表性能优化
  • 事件的销毁
  • 图片资源懒加载
  • 路由懒加载
  • 第三方插件的按需引入
  • 优化无限列表性能
  • 服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

  • Webpack 对图片进行压缩
  • 减少 ES6 转为 ES5 的冗余代码
  • 提取公共代码
  • 模板预编译
  • 提取组件的 CSS
  • 优化 SourceMap
  • 构建结果输出分析
  • Vue 项目的编译优化

（3）基础的 Web 技术的优化

  • 开启 gzip 压缩
  • 浏览器缓存
  • CDN 的使用
  • 使用 Chrome Performance 查找性能瓶颈

8. 服务端渲染

8.1. 使用过 Vue SSR 吗？说说 SSR？

9. vue3.0

9.1. 对于即将到来的 vue3.0 特性你有什么了解的吗？

Vue 3.0 正走在发布的路上，Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大，因此 Vue 3.0 增加以下这些新特性：

（1）监测机制的改变

3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言覆盖的反应性跟踪。这消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制：

  • 只能监测属性，不能监测对象
  • 检测属性的添加和删除；
  • 检测数组索引和长度的变更；
  • 支持 Map、Set、WeakMap 和 WeakSet。 新的 observer 还提供了以下特性：

用于创建 observable 的公开 API。这为中小规模场景提供了简单轻量级的跨组件状态管理解决方案。 默认采用惰性观察。在 2.x 中，不管反应式数据有多大，都会在启动时被观察到。如果你的数据集很大，这可能会在应用启动时带来明显的开销。在 3.x 中，只观察用于渲染应用程序最初可见部分的数据。 更精确的变更通知。在 2.x 中，通过 Vue.set 强制添加新属性将导致依赖于该对象的 watcher 收到变更通知。在 3.x 中，只有依赖于特定属性的 watcher 才会收到通知。 不可变的 observable：我们可以创建值的“不可变”版本（即使是嵌套属性），除非系统在内部暂时将其“解禁”。这个机制可用于冻结 prop 传递或 Vuex 状态树以外的变化。 更好的调试功能：我们可以使用新的 renderTracked 和 renderTriggered 钩子精确地跟踪组件在什么时候以及为什么重新渲染。

（2）模板

模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。 同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来方便习惯直接使用 api 来生成 vdom 。

（3）对象式的组件声明方式

vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。3.0 修改了组件的声明方式，改成了类式的写法，这样使得和 TypeScript 的结合变得很容易。 此外，vue 的源码也改用了 TypeScript 来写。其实当代码的功能复杂之后，必须有一个静态类型系统来做一些辅助管理。现在 vue3.0 也全面改用 TypeScript 来重写了，更是使得对外暴露的 api 更容易结合 TypeScript。静态类型系统对于复杂代码的维护确实很有必要。

（4）其它方面的更改

vue3.0 的改变是全面的，上面只涉及到主要的 3 个方面，还有一些其他的更改：

支持自定义渲染器，从而使得 weex 可以通过自定义渲染器的方式来扩展，而不是直接 fork 源码来改的方式。 支持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。 基于 treeshaking 优化，提供了更多的内置功能。

10. 开放性问题

10.1. 说说你使用 Vue 框架踩过最大的坑是什么？怎么解决的？

部分整理来源于https://juejin.cn/post/6844903918753808398

avatar
文章
阅读
粉丝