2020前端最新面试题（vue篇）

我会带着你远行 2023-02-10 05:06 22阅读 0赞

# 2020前端最新面试题（vue篇） #

> 由于疫情原因，原本每年的“金三银四”仿佛消失，随之而来的是找工作的压力，这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题，仅供参考哦，第一次写博客，如有错误之处，还请指出。

### 目录 ###

*  1.vue-router是怎么传递参数的
 *  2.v-if和v-for一起使用的弊端以及解决办法
 *  3.beforeDestroyed里面一般进行什么操作
 *  4.vue同级组件间怎么传值
 *  5.vue中父组件如何获取子组件的属性和方法
 *  6.watch和computed的区别
 *  7.vue父组件和子组件生命周期的顺序
 *  8.vue中父组件能监听到子组件的生命周期吗
 *  9.vue中的事件修饰符主要有哪些？分别是什么作用
 *  10.介绍下什么是<keep-alive />
 *  11.watch能监听到数组的pop行为吗
 *  12.watch如何实现深度监听
 *  13.vue中如何解决页面不重新渲染问题
 *  14. link和@import的区别
 *  15. 如何理解js中的原型链
 *  16. 怎么理解js中的内存泄露
 *  17. 跨域问题
 *  18. Vuex：Vue的状态管理模式 + 库
 *  19. Vue的生命周期
 *  20. Computed和Watch的区别
 *  21. Json和Xml数据的区别
 *  22. http和https的区别
 *  23. Vue-Router 跳转方式
 *  24. 什么是闭包？
 *  25. 什么是事件代理（事件委托）？有什么好处？
 *  26. JS原型，原型链相关知识点
 *  27. 组件通信方式有哪些？
 *  28. 子组件为什么不可以修改父组件传递的Prop？
 *  29. v-model是如何实现双向绑定的？
 *  30. Vuex和单纯的全局对象有什么区别？
 *  31. 为什么 Vuex 的 mutation 中不能做异步操作？
 *  32. vue组件有哪些生命周期钩子？
 *  33. Vue 的父组件和子组件生命周期钩子执行顺序是什么？
 *  34. v-show 和 v-if 有哪些区别？
 *  35. computed 和 watch 有什么区别？
 *  36. computed vs methods
 *  37. keep-alive 的作用是什么？
 *  38. Vue 中 v-html 会导致什么问题
 *  39. Vue 的响应式原理
 *  40. Object.defineProperty有哪些缺点？
 *  41. Vue中如何检测数组变化？
 *  42. 组件的 data 为什么要写成函数形式？
 *  43. nextTick是做什么用的，其原理是什么?
 *  44. Vue 的模板编译原理
 *  45. v-for 中 key 的作用是什么？
 *  46. 为什么 v-for 和 v-if 不建议用在一起
 *  47. Vue-router 导航守卫有哪些
 *  48. vue-router hash 模式和 history 模式有什么区别？
 *  49. vue-router hash 模式和 history 模式是如何实现的？

### 1. Vue-Router有两种传参方式 ###

(1)通过在router.js文件中配置path的地方动态传递参数 eg: path: '/detail/:id' 然后在组件内通过this.$route.params.id即可获取  
(2).在router-link标签中传递参数

<router-link :to={
    params: {
        x: 1
        }
    } />

也通过this.$route.params获取

*注意：这里通过router-link传递参数的方式是隐式传参*

### 2. V-if和V-for一起使用的弊端以及解决办法 ###

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

*解决办法：在v-for的外层或内层包裹一个元素来使用v-if*

### 3. BeforeDestroy里面一般进行什么操作 ###

beforedestoryed是组件销毁之前执行的一个生命周期，在这个生命周期里，我们可以进行回调函数或定时器的清除，不用的dom元素的清除等

### 4. Vue同级组件间怎么传值 ###

1.如果是兄弟组件，可通过父元素作为中间组件进行传值  2.通过创建一个bus，进行传值

// 创建一个文件，定义bus中间件，并导出
    const bus = new Vue()
    // 在一个组件中发送事件
    bus.$emit('事件名称', 传递的参数)
    // 在另一个组件中监听事件
    bus.$on('事件名称', 得到传过来的参数)

###    5. Vue中父组件如何获取子组件的属性和方法 ###

vue中通过在子组件上定义ref属性来获取子组件的属性和方法，代码如下：

// 这里是父组件
    <templete>
        <child ref="child"/>
    </templete>
    <script>
    method: {
        getChild () {
            this.$refs.child.属性名（方法名）
        }
    }
    </script>

###    6. Watch和Computed的区别 ###

*  watch作用通常是由一个值影响多个值的改变并且能监听到这个值变化时，会去执行一个回调函数，此时我们可以在这个回调函数中做一些逻辑处理
 *  computed是根据依赖的值衍生出一个新的值，并且依赖的值可以有多个，只有当被依赖的值发生改变时，才会重新去执行计算

### 7. Vue父组件和子组件生命周期的顺序 ###

1.渲染过程顺序：

*父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()*

2.更新过程顺序：

父组件更新过程：  
*父组件beforeUpdate() -> 父组件updated()*  
子组件更新过程：  
*父组件beforeUpdate() -> 子组件beforeUpdate() -> 子组件updated() -> 父组件updated()*

3.销毁过程

*父组件beforeDestroy() -> 子组件beforeDestroy() -> 子组件destroyed() -> 父组件destroyed()*

### 8. Vue中父组件能监听到子组件的生命周期吗 ###

父组件能够监听到子组件的生命周期，通过@hook:进行监听代码如下：

// 这里是父组件
    <template>
        <child
        @hook:mounted="getChildMounted"
        />
    </template>
    <script>
    method: {
        getChildMounted () {
            // 这里可以获取到子组件mounted的信息
        }
    }
    </script>

###       9. Vue中的事件修饰符主要有哪些？分别是什么作用 ###

*  .stop: 阻止事件冒泡
 *  .native: 绑定原生事件
 *  .once: 事件只执行一次
 *  .self:将事件绑定在自身身上，相当于阻止事件冒泡
 *  .prevent: 阻止默认事件
 *  .caption: 用于事件捕获

### 10.介绍下什么是keep-alive ###

*keep-alive是用于做组件缓存的，只会执行一次，不会被销毁。被keep-alive包裹的组件，没有create和beforeDestroyed等方法，但是有activated和deactivated方法。*

### 11.watch能监听到数组的pop行为吗 ###

*对于有返回值的数据，watch就能监听到，比如数组的pop，push, unshift,map等行为。*

### 12. Watch如何实现深度监听 ###

watch: {
        obj: {
            handler: function(val) {
            },
            deep: true // 深度监听
        }
    }

### 13. Vue中如何解决页面不重新渲染问题 ###

(1).修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值')

(2).使用this.$forceUpdate()方法可重新渲染页面

### 14. link和@import的区别 ###

*  1、link是html的标签，不仅可以加载css还可以定义Rss , rel连接属性；@import是css的语法规则，只能引入样式；
 *  2、加载页面时，link是同时加载的，@impor是页面加载完后才加载
 *  3、link没有兼容性的问题，而@import只在较高版本的浏览器才可以识别
 *  4、link可以通过js插入操作dom，@import 不可以！

### 15. 如何理解js中的原型链 ###

1；每个构造函数都有一个原型对象
    2；每个原型对象都有一个指向构造函数的指针
    3；每个实例函数都有一个指向原型对象的指针。
    4；查找方式是一层一层查找，直至顶层。Object.prototype

### 16. 怎么理解js中的内存泄露 ###

定义：程序不需要的内存，由于某些原因其不会返回到操作系统或者可用内存池中。内存泄露会导致（运行缓慢 ，高延迟，崩溃）的问题，常见的导致内存泄露的原因有：

*  1；意外的全局变量
 *  2；被遗忘的计时器或回调函数
 *  3；脱离文档的DOM的引用
 *  4；闭包

### 17. 跨域问题 ###

由于浏览器的同源策略会导致跨域，同源策略又分为

*  一：DOM同源策略：禁止对不同源页面的DOM进行操作，主要是不同域名的ifram是限制互相访问的
 *  二：xmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起http请求，只要 "协议:域名:端口" 有一个不同都被当做不同的域之间的请求，即跨域请求

解决方式：

*  1、CORS跨域资源共享   后端需要设置Access--Control-Allow-Credentials:true
 *  2、jsonp实现跨域：动态创建script，利用src属性进行跨域
 *  3、 nginx代理跨域
 *  4、nodejs中间件代理跨域
 *  5、WebSokect协跨域
 *  6、window.name+ifram跨域

###    18. Vuex：Vue的状态管理模式 + 库 ###

1、state

*保存vuex中的数据源，通过this.$store.state获取 *

2、getters

*用于监听state中的值的变化，返回计算后的结果。getter的返回值会根据它的依赖被缓存起来*

3、mutations

*是修改store中的值得唯一方式*

4、action

*官方建议提交一个actions，在actions中提交mutations再去修改状态值。 this.$store.dispatch('add')*

//this.$store.commit('add')

5、modules 模块化

### 19. Vue的生命周期 ###

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

*  beforeCreate: vue元素的挂载元素el和数据都为undefined，还未初始化；
 *  created：vue实例的数据对象data有了，el还没有；
 *  beforeMount：vue实例的$el和data都初始化了，但是还挂载在之前的虚拟dom节点上，data.message还未替换；
 *  mounted：vue实例挂载完成，data.message成功渲染。
 *  更新前后：data变化时会触发beforeUpdate和updated方法；
 *  销毁前后：beforeDestory和destoryed，在执行destoryed方法后，对data的改变不会触发周期函数，说明vue实例已经解除了事件监听以及dom绑定，但是dom结构依然存在；

vue生命周期的作用：

他的生命周期中有多个事件钩子，让我们控制整个vue实例的过程时更容易形成良好的逻辑。

生命周期钩子的一些使用方法：

*  beforeCreate：loading事件，在加载实例时触发。
 *  created：初始化完成事件，异步请求。
 *  mounted：挂载元素，获取dom节点
 *  uptaded：对数据统一处理
 *  beforeDestory：确认事件停止。
 *  nextTick：更新数据后立即操作dom。

### 20. Computed和Watch的区别 ###

**computed**

*计算结果并返回，只有当被计算的属性发生改变时才会触发（即：计算属性的结果会被缓存，除非依赖的响应属性变化才会重新及孙）*

**watch**  
*监听某一个值，当被监听的值发生变化时，执行相关操作。（与computed的区别是，watch更加适用于监听某一个值得变化，并做对应操作，比如请求后太接口等。而computed适用于计算已有的值并返回结果。）*

监听简单数据类型：

data(){
          return{
            'first':2
          }
        },
        watch:{
          first(){
            console.log(this.first)
          }
        },
    
        ...
    }

### 21. Json和Xml数据的区别 ###

1、数据体积方面：xml是重量级的，json是轻量级的，传递的速度更快些。。
    2、数据传输方面：xml在传输过程中比较占带宽，json占带宽少，易于压缩。
    3、数据交互方面：json与javascript的交互更加方便，更容易解析处理，更好的进行数据交互
    4、数据描述方面：json对数据的描述性比xml较差
    5、xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

### 22. http和https的区别 ###

*Http：超文本传输协议（Http，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。*

*Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议可分为两层：SSL记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL握手协议（SSL Handshake Protocol），它建立在SSL记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。*

***HTTP与HTTPS的区别***

*  1、HTTP是超文本传输协议，信息是明文传输，HTTPS是具有安全性的SSL加密传输协议。
 *  2、HTTPS协议需要ca申请证书，一般免费证书少，因而需要一定费用。
 *  3、HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样。前者是80，后者是443。
 *  4、HTTP连接是无状态的，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，安全性高于HTTP协议。

***https的优点***

尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

*  1）使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
 *  2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
 *  3）HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
 *  4）谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

***Https的缺点***

*  1）Https协议握手阶段比较费时，会使页面的加载时间延长近。
 *  2）Https连接缓存不如Http高效，会增加数据开销，甚至已有的安全措施也会因此而受到影响；
 *  3）SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。
 *  4）Https协议的加密范围也比较有限。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一

### 23. Vue-Router 跳转方式 ###

**1. this.$router.push**

//跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
    this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})     
    //获取参数 {
       {this.$route.query.userId}}
    //this.$router.push({name: 'detail',params:{id: 'abc'}})
    获取参数：{
       {this.$route.params.userId}}

**2. query和params 的区别**

a)  用法上，query要用path来引入，params要用name来引入：eg

this.$router.push({
       name:"detail",
       params:{
        name:'nameValue',
        code:10011
     }
    });

b) 展示上，query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

**3. this.$router.replace**

*同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。*

**4. this.$router.go**

*相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面*

**5. router-link标签使用**

*  1) 根据路由路径（/home/sort/detail）跳转 <router-link :to="\{path: '/home/sort/detail', query:\{id: 'abc'\}\}">点击查看子页面</router-link>
 *  2) 根据路由名称（detail）跳转 <router-link :to="\{name: 'detail', params:\{id: 'abc'\}\}">点击查看子页面</router-link>    :to="" 可以实现绑定动态的 路由 和 参数

### 24. 什么是闭包？ ###

闭包是指有权访问其他函数所定义的变量的函数。

使用闭包的话只需要将一个函数定义在另一个函数的内部，并将它给暴露出来，比如可以直接返回或者给他传递给其他函数，由于内部函数对外部函数变量还存在着应用，所以在外部函数执行完毕后不会主动将该内存销毁。

闭包最重要的用途是实现对象的私有数据。 对象的内部数据无法被轻易的修改，保证了程序的安全性。

但同时大量的使用闭包会导致内存泄漏。

### 25. 什么是事件代理（事件委托）？有什么好处？ ###

**JS高级程序上的定义：利用事件冒泡，只绑定一个函数就可以处理一类事件。**

在JS中，添加到页面上的事件数量直接关乎着页面的性能，多次与dom发生交互访问dom会导致页面重绘和重排，导致拖慢整个页面，这就是为什么优化里中的减少dom操作的原因。而且，每个函数都是一个对象，对象就要占据内存，内存大了性能自然就慢了。

事件委托的实现原理就是利用事件冒泡。

冒泡的顺序 ：

*  目标元素
 *  dom结构 直至 body
 *  body
 *  html
 *  document
 *  windon

事件代理的好处:

*  优化性能
 *  当新元素绑添加进来的时候不需要再次绑定事件，通过冒泡就可以触发

### 26. JS原型，原型链相关知识点 ###

在JS中，每创建出来一个函数js就会默认创建一个prototype的属性，这个属性指向函数的原型对象。

在原型对象里面有一个属性constructor属性指向了构造函数。

每个对象都有一个隐式原型 \_\_proto\_\_ ，指向的是构造该对象的构造函数的原型对象。

原型对象也是对象,所以如果我们让原型对象指向另外的一个实例，这个实例也有自己的原型对象，如果这个实例的原型对象又等于了另外的实例，一层层下去就形成了一个链条。这就是所谓的原型链。

函数也是对象，所以函数也有隐式原型，函数的隐式原型为Function.prototype

Function.prototype的隐式原型为Object.prototype

Object.prototype 的隐式原型为null 这里也就是原型链的顶端

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70][]

--------------------

# #

## 组件通信相关问题 ##

## ##

### 27. 组件通信方式有哪些？ ###

**父子组件通信：**

`props` 和 `event`、`v-model`、 `.sync`、 `ref`、 `$parent` 和 `$children`

**非父子组件通信：**

`$attr` 和 `$listeners`、 `provide` 和 `inject`、`eventbus`、通过根实例`$root`访问、`vuex`、`dispatch` 和 `brodcast`

通信方式属于较基础的面试题，具体的可参考我的文章—— [vue 组件通信看这篇就够了][vue]

### 28. 子组件为什么不可以修改父组件传递的Prop？ ###

Vue提倡单向数据流,即父级 `props` 的更新会流向子组件,但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解。如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。

## ##

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

`v-model` 是用来在表单控件或者组件上创建双向绑定的，他的本质是 `v-bind` 和 `v-on` 的语法糖，在一个组件上使用 `v-model`，默认会为组件绑定名为 `value` 的 `prop` 和名为 `input` 的事件。  
文章—— [vue 组件通信看这篇就够了][vue] 中也有其详细介绍

## ##

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

Vuex和全局对象主要有两大区别：

1.  Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.  不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

## ##

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

Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。 参考尤大大回答： [www.zhihu.com/question/48…][www.zhihu.com_question_48]

# #

--------------------

## 生命周期相关问题 ##

## ##

### 32. vue组件有哪些生命周期钩子？ ###

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。  
`<keep-alive>` 有自己独立的钩子函数 activated 和 deactivated。

## ##

### 33. Vue 的父组件和子组件生命周期钩子执行顺序是什么？ ###

**渲染过程：**  
父组件挂载完成一定是等子组件都挂载完成后，才算是父组件挂载完，所以父组件的mounted在子组件mouted之后  
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

**子组件更新过程：**

1.  影响到父组件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
2.  不影响父组件： 子beforeUpdate -> 子updated

**父组件更新过程：**

1.  影响到子组件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
2.  不影响子组件： 父beforeUpdate -> 父updated

**销毁过程：**  
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

看起来很多好像很难记忆，其实只要理解了，不管是哪种情况，都一定是父组件等待子组件完成后，才会执行自己对应完成的钩子，就可以很容易记住。

# #

--------------------

## 相关属性的作用 & 相似属性对比 ##

### 34. v-show 和 v-if 有哪些区别？ ###

`v-if` 会在切换过程中对条件块的事件监听器和子组件进行销毁和重建，如果初始条件是false，则什么都不做，直到条件第一次为true时才开始渲染模块。  
`v-show` 只是基于css进行切换，不管初始条件是什么，都会渲染。  
所以，`v-if` 切换的开销更大，而 `v-show` 初始化渲染开销更大，在需要频繁切换，或者切换的部分dom很复杂时，使用 `v-show` 更合适。渲染后很少切换的则使用 `v-if` 更合适。

## ##

### 35. computed 和 watch 有什么区别？ ###

`computed` 计算属性，是依赖其他属性的计算值，并且有缓存，只有当依赖的值变化时才会更新。  
`watch` 是在监听的属性发生变化时，在回调中执行一些逻辑。  
所以，`computed` 适合在模板渲染中，某个值是依赖了其他的响应式对象甚至是计算属性计算而来，而 `watch` 适合监听某个值的变化去完成一段复杂的业务逻辑。

## ##

### 36. computed vs methods ###

计算属性是基于他们的响应式依赖进行缓存的，只有在依赖发生变化时，才会计算求值，而使用 `methods`，每次都会执行相应的方法。

## ##

### 37. keep-alive 的作用是什么？ ###

`keep-alive` 可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。  
其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用 `keep-alive` 包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

## ##

### 38. Vue 中 v-html 会导致什么问题 ###

在网站上动态渲染任意 HTML，很容易导致 XSS 攻击。所以只能在可信内容上使用 v-html，且永远不能用于用户提交的内容上。

# #

--------------------

## 原理分析相关题目 ##

这部分的面试题，只看答案部分是不够的，最好结合源码来分析，可以有更深的理解。我在之前的文章对某些源码做过分析的，会给出链接。

### 39. Vue 的响应式原理 ###

如果面试被问到这个问题，又描述不清楚，可以直接画出 Vue 官方文档的这个图，对着图来解释效果会更好。

Vue 的响应式是通过 `Object.defineProperty` 对数据进行劫持，并结合观察者模式实现。 Vue 利用 `Object.defineProperty` 创建一个 `observe` 来劫持监听所有的属性，把这些属性全部转为 `getter` 和 `setter`。Vue 中每个组件实例都会对应一个 `watcher` 实例，它会在组件渲染的过程中把使用过的数据属性通过 `getter` 收集为依赖。之后当依赖项的 `setter` 触发时，会通知 `watcher`，从而使它关联的组件重新渲染。

### 40. Object.defineProperty有哪些缺点？ ###

这道题目也可以问成 “为什么vue3.0使用proxy实现响应式？” 其实都是对Object.defineProperty 和 proxy实现响应式的对比。

1.  `Object.defineProperty` 只能劫持对象的属性，而 `Proxy` 是直接代理对象  
    由于 `Object.defineProperty` 只能对属性进行劫持，需要遍历对象的每个属性。而 `Proxy` 可以直接代理对象。
2.  `Object.defineProperty` 对新增属性需要手动进行 `Observe`， 由于 `Object.defineProperty` 劫持的是对象的属性，所以新增属性时，需要重新遍历对象，对其新增属性再使用 `Object.defineProperty` 进行劫持。 也正是因为这个原因，使用 Vue 给 `data` 中的数组或对象新增属性时，需要使用 `vm.$set` 才能保证新增的属性也是响应式的。
3.  `Proxy` 支持13种拦截操作，这是 `defineProperty` 所不具有的。
4.  新标准性能红利  
    `Proxy` 作为新标准，长远来看，JS引擎会继续优化 `Proxy` ，但 `getter` 和 `setter` 基本不会再有针对性优化。
5.  `Proxy` 兼容性差 目前并没有一个完整支持 `Proxy` 所有拦截方法的Polyfill方案

更详细的对比，可以查看我的文章 [为什么Vue3.0不再使用defineProperty实现数据监听？][Vue3.0_defineProperty]

## ##

### 41. Vue中如何检测数组变化？ ###

Vue 的 `Observer` 对数组做了单独的处理，对数组的方法进行编译，并赋值给数组属性的 `__proto__` 属性上，因为原型链的机制，找到对应的方法就不会继续往上找了。编译方法中会对一些会增加索引的方法（`push`，`unshift`，`splice`）进行手动 observe。 具体同样可以参考我的这篇文章 [为什么Vue3.0不再使用defineProperty实现数据监听？][Vue3.0_defineProperty]，里面有详细的源码分析。

## ##

### 42. 组件的 data 为什么要写成函数形式？ ###

Vue 的组件都是可复用的，一个组件创建好后，可以在多个地方复用，而不管复用多少次，组件内的 `data` 都应该是相互隔离，互不影响的，所以组件每复用一次，`data` 就应该复用一次，每一处复用组件的 `data` 改变应该对其他复用组件的数据不影响。  
为了实现这样的效果，`data` 就不能是单纯的对象，而是以一个函数返回值的形式，所以每个组件实例可以维护独立的数据拷贝，不会相互影响。

### 43. nextTick是做什么用的，其原理是什么? ###

能回答清楚这道问题的前提，是清楚 EventLoop 过程。  
在下次 DOM 更新循环结束后执行延迟回调，在修改数据之后立即使用 `nextTick` 来获取更新后的 DOM。  
`nextTick` 对于 micro task 的实现，会先检测是否支持 `Promise`，不支持的话，直接指向 macro task，而 macro task 的实现，优先检测是否支持 `setImmediate`（高版本IE和Etage支持），不支持的再去检测是否支持 MessageChannel，如果仍不支持，最终降级为 `setTimeout` 0；  
默认的情况，会先以 `micro task` 方式执行，因为 micro task 可以在一次 tick 中全部执行完毕，在一些有重绘和动画的场景有更好的性能。  
但是由于 micro task 优先级较高，在某些情况下，可能会在事件冒泡过程中触发，导致一些问题(可以参考 Vue 这个 issue：[github.com/vuejs/vue/i…][github.com_vuejs_vue_i])，所以有些地方会强制使用 macro task （如 `v-on`）。

*注意：之所以将 `nextTick` 的回调函数放入到数组中一次性执行，而不是直接在 `nextTick` 中执行回调函数，是为了保证在同一个tick内多次执行了 `nextTcik`，不会开启多个异步任务，而是把这些异步任务都压成一个同步任务，在下一个tick内执行完毕。*

## ##

### 44. Vue 的模板编译原理 ###

vue模板的编译过程分为3个阶段：

1.  第一步：解析  
    将模板字符串解析生成 AST，生成的AST 元素节点总共有 3 种类型，1 为普通元素， 2 为表达式，3为纯文本。
2.  第二步：优化语法树  
    Vue 模板中并不是所有数据都是响应式的，有很多数据是首次渲染后就永远不会变化的，那么这部分数据生成的 DOM 也不会变化，我们可以在 patch 的过程跳过对他们的比对。

此阶段会深度遍历生成的 AST 树，检测它的每一颗子树是不是静态节点，如果是静态节点则它们生成 DOM 永远不需要改变，这对运行时对模板的更新起到极大的优化作用。

1.  生成代码

const code = generate(ast, options)
    复制代码

通过 `generate` 方法，将ast生成 `render` 函数。 更多关于 AST，Vue 模板编译原理，以及和 AST 相关的 Babel 工作原理等，我在 [掌握了AST，再也不怕被问babel，vue编译，Prettier等原理][AST_babel_vue_Prettier] 中做了详细介绍。

### 45. v-for 中 key 的作用是什么？ ###

清晰回答这道问题，需要先清楚 Vue 的 diff 过程，关于 diff 原理，推荐一篇文章 [my.oschina.net/u/3060934/b…][my.oschina.net_u_3060934_b]

`key` 是给每个 `vnode` 指定的唯一 `id`，在同级的 `vnode` diff 过程中，可以根据 `key` 快速的对比，来判断是否为相同节点，并且利用 `key` 的唯一性可以生成 `map` 来更快的获取相应的节点。  
另外指定 `key` 后，就不再采用“就地复用”策略了，可以保证渲染的准确性。

### 46. 为什么 v-for 和 v-if 不建议用在一起 ###

当 `v-for` 和 `v-if` 处于同一个节点时，`v-for` 的优先级比 `v-if` 更高，这意味着 `v-if` 将分别重复运行于每个 `v-for` 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费。  
这种场景建议使用 `computed`，先对数据进行过滤。

# #

## 路由相关问题 ##

### 47. Vue-router 导航守卫有哪些 ###

全局前置/钩子：beforeEach、beforeResolve、afterEach

路由独享的守卫：beforeEnter

组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

完整的导航解析流程如下：

*  导航被触发。
 *  在失活的组件里调用离开守卫。
 *  调用全局的 beforeEach 守卫。
 *  在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
 *  在路由配置里调用 beforeEnter。
 *  解析异步路由组件。
 *  在被激活的组件里调用 beforeRouteEnter。
 *  调用全局的 beforeResolve 守卫 (2.5+)。
 *  导航被确认。
 *  调用全局的 afterEach 钩子。
 *  触发 DOM 更新。
 *  用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

## ##

### 48. vue-router hash 模式和 history 模式有什么区别？ ###

区别：

1.  url 展示上，hash 模式有“\#”，history 模式没有
2.  刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由。
3.  兼容性。hash 可以支持低版本浏览器和 IE。

## ##

### 49. vue-router hash 模式和 history 模式是如何实现的？ ###

**hash 模式：**  
`#`后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面。同时通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。

**history 模式：**  
history 模式的实现，主要是 HTML5 标准发布的两个 API，`pushState` 和 `replaceState`，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。

关于 `vue-router` 部分，推荐文章 [juejin.im/post/5b10b4…][juejin.im_post_5b10b4]

本文是系列文章《2020年大厂面试指南》的第一篇文章，后续系列文章更新，请关注我的公众号【前端小苑】。有任何问题也欢迎加我个人微信yu\_shihu\_进行交流

*原文链接：https://blog.csdn.net/weixin\_42981560/article/details/104646699*  
*原文链接：https://blog.csdn.net/weixin\_45325238/article/details/104968195*

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520111427424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5,size_16,color_FFFFFF,t_70
[vue]: https://mp.weixin.qq.com/s?__biz=Mzg2NTA4NTIwNA==&mid=2247484468&idx=1&sn=3c309945992fe4f0c6276d91d7cb67b8&chksm=ce5e364ff929bf59ae686e3fa2412632348d6e190054e0b83bed11b5fd851ebbe8d326b5caf0&token=1424393752&lang=zh_CN#rd
[www.zhihu.com_question_48]: https://www.zhihu.com/question/48759748/answer/112823337
[Vue3.0_defineProperty]: https://mp.weixin.qq.com/s?__biz=Mzg2NTA4NTIwNA==&mid=2247485104&idx=1&sn=648f1850fb59f04c6ca52cdd794013b5&chksm=ce5e34cbf929bddd4325de7f78dc4ad5822cddff69c999d1225f860e917dfd3d6eea43527c56&token=1424393752&lang=zh_CN#rd
[github.com_vuejs_vue_i]: https://github.com/vuejs/vue/issues/6556
[AST_babel_vue_Prettier]: https://mp.weixin.qq.com/s?__biz=Mzg2NTA4NTIwNA==&mid=2247485010&idx=1&sn=8a5a46a10f7ea706ef41592359a646a4&chksm=ce5e3429f929bd3f48fc6f6c85226aac672dd8236a203ec97977fbc0330a39c7f0883b634cc0&token=1424393752&lang=zh_CN#rd
[my.oschina.net_u_3060934_b]: https://my.oschina.net/u/3060934/blog/3103711/print%E3%80%82
[juejin.im_post_5b10b4]: https://juejin.im/post/5b10b46df265da6e2a08a724