vue2面试题：公司真实vue2面试题整理

编辑排版 | 宋大狮

平台运营 | 小唐狮

一、说一下vue2的生命周期？

    创建：

        beforecreate:

            实例创建前

            此阶段的data、methods、computed、watch的数据和方法不能被访问

        created:

            实例创建完成后

            此阶段完成数据监听，可以使用数据、更改数据。无法与Dom进行交互，想要的话可以通过nextTick来访问。

    挂载：

        beforeMount:

            页面渲染前

            此阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

        mounted:

            页面渲染完成后

            此阶段真实Dom渲染完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

    更新：

        beforeUpdate:

            响应式数据更新前

            此阶段更改数据，不会造成页面重新渲染。

        updated:

            响应式数据更新完成后

            避免在此阶段更改数据，因为这可能会导致无限循环的更新。

    销毁：

        beforeDestroy:

            实例销毁前

            我们可以在这时进行善后收尾工作，比如清除定时器、解除绑定事件

        destroyed:

            实例销毁完成后

    缓存：

        activited:

            keep-alive专属，组件被激活时调用

        deactivited:  

            keep-alive专属，组件被销毁时调用

    1、异步请求放在created还是mounted：

        如果是单单的一个父级组件，放哪里都无所谓。

        如果涉及到了要控制子父组件先后显示正确内容的时候，就可以考虑下父组件的请求要放在哪个钩子里了。想要子组件先拿到数据渲染就放在mounted中，想要父组件先拿到数据就放在created中。

    2、第一次加载页面触发了创建、挂载生命周期

    3、父子组件生命周期执行顺序：

        组件渲染的顺序是先父后子，渲染完成的顺序是先子后父

        组件更新的顺序是先父后子，更新完成的顺序是先子后父

        组件销毁的顺序是先父后子，销毁完成的顺序是先子后父

二、说一下v-show、v-if、v-for的理解？

    v-show和v-if的区别：

        v-if：通过操控DOM增删来实现显示隐藏，不适合频繁切换，数据多不建议用v-if，每一次切换则重新消耗性能

        v-show：修改元素的display实现显示隐藏，适合频繁切换，只在第一次渲染时消耗性能

    v-if和v-for的优先级：

        当v-if与v-for一起使用时，v-for比v-if优先级高，如果连用的话会把v-if给每个元素都添加一下，会造成性能问题，所以不推荐v-if和v-for在同一个标签中同时使用。

        解决办法：在计算属性中，将v-if中的判断转化成对v-for数组的过滤

    v-for中key的作用？

        key代表的是唯一，作用是更高效的更新虚拟dom，diff算法时便于区分新旧虚拟dom，新旧虚拟dom的key相同时不会重新渲染，提高性能

        为何不推荐index作为key值：当以数组下标index作为key值时，当其中一个元素发生了变化(增删改查)，就有能导致所有的元素的key值发生改变，导致更新dom时浪费性能

三、说一下组件通信有哪些方式？

    父传子

        1、自定义属性 + props：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过props进行接收

        2、$parent：直接访问父组件实例的属性和方法

        3、$attrs：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过$attrs进行接收【与props不能共存】

        4、插槽

    子传父

        1、$emit + 自定义事件：在父组件中，给子组件绑定一个自定义事件，绑定事件的值为接收参数的函数，在子组件中，通过$emit发送数据

        2、$refs：直接访问子组件实例的属性和方法

        3、$children：直接访问子组件实例的属性和方法【返回数组，必须遍历赋值后才能渲染】

    祖传孙

        1、provide函数传，inject数组收

        2、自定义属性 + v-bind="$attrs"【中间人】 + $attrs

    孙传祖

        1、$emit + v-on="$listeners"【中间人】 + 自定义事件

    兄弟间

        1、$bus 全局事件总线：给vue原型添加一个vue实例，用this.$bus.$emit发送，用this.$bus.$on接收

        2、Vuex

        3、pubsub 发布订阅

    路由传参

        params传参（地址栏不显示参数）

        query传参（地址栏显示参数）

四、watch和computed的区别

    computed计算属性：

        1、如果一个数据需要经过复杂计算就用computed

        2、支持缓存，只有依赖数据发生改变时，才会重新进行计算

        3、不支持异步，当计算属性内有异步操作时，无法监听到数据的变化。原因：定义的函数接收return的结果，return属于同步执行的，是没办法拿到异步请求结果的

        4、计算属性只能取不能存，即不能对计算属性直接赋值。如需要存，要给计算属性手动添加setter

    watch监听器：

        1、如果一个数据需要被监听并且对数据做一些操作就用watch

        2、不支持缓存，数据变化会直接触发相应的操作

        3、支持异步

        设置deep:true  开启深度监听，如果监听的是对象类型，当手动修改对象的某个属性时，可以被监听到

        设置immediate:true  watch初始化时会立即执行一次handler方法

五、说一下为什么data是一个函数？

    data必须是函数，是为了保证不同组件的独立性和可复用性，防止不同组件实例间data的引用关系，避免变量污染

六、说一下什么是路由守卫？

    是路由跳转前、后的一些钩子函数

    分类：

        全局守卫：【写在main.js中 或 router文件夹下的index.js中】

            beforeEach: 进入路由之前的验证（常用，如：判断用户是否登录）

            afterEach: 路由进入之后的验证（常用，如：修改页面标题）

        局部守卫：【写在路由组件内单独的守卫】

            beforeRouteEnter: 进入路由之前的验证

            beforeRouteLeave: 离开路由之前的验证（常用，离开当前页面提示是否保存内容）

            beforeRouteUpdate: 组件路由更新前的验证

        独享守卫：【相当于写在路由配置里的全局守卫，只有前置守卫】

            beforeEnter：进入路由之前的验证

    三个参数：

        to: 要进入的路由对象

        from: 要离开的路由对象

        next: 放行函数

七、说一下路由传参方式query和params的区别？

    1、传参方式

        query通过path进行跳转传参，接收的时候通过this.$route.query进行接收   

        params通过name进行跳转传参，接收的时候通过this.$route.params进行接收

    2、安全性

        params传值不会显示到地址栏，安全性高，但页面刷新数据会丢失

        query传值会暴露在地址栏，页面刷新不会丢失

八、说一下路由模式hash和history的区别？

    在单页面应用SPA中，路由描述的是URL与视图之间的映射关系，这种映射是单向的，即URL变化引起视图更新（无需刷新页面）。  

    1、hash模式

        原理：

            用 url + #后面的hash值 来模拟一个完整的url，直接刷新页面不会导致浏览器向服务器发出新的请求，路由切换时不会

            当调用$router.push方法，会改变hash值触发hashchange事件，前进到指定的url。vue-router会根据url做路由匹配来修改页面内容，实现路由切换的效果

            改变hash值触发hashchange事件，hashchange事件对象中会记录变化的url。点击浏览器的前进后退，会改变hash值，实现路由切换的效果

        特点：

            地址栏有#，影响美观，直接刷新页面不会报404

2、history模式

        原理：

            用 url + 路径 真正实现一个完整的url，直接刷新页面会导致浏览器向服务器发出新的请求，路由切换时不会

            当调用$router.push方法，会改变路径调用pushState方法，前进到指定的url。vue-router会根据url做路由匹配来修改页面内容，实现路由切换的效果

            改变路径调用pushState方法，pushState方法中会记录变化的url。点击浏览器的前进后退 或者 手动调back、forward、go方法，会触发popstate事件，实现路由切换的效果

        特点：

            地址栏没有#，不影响美观，直接刷新页面会报404，需要后端在Nginx中做代理地址的配置

九、说一下对keep-alive的理解？

    缓存组件，减少请求次数

    根据条件缓存页面的方式：

        :include="['组件name']"  指定想要缓存的组件,其他组件不缓存

        :exclude="['组件name']"  指定不想要缓存的组件,其他组件缓存

        利用路由的元属性meta，配合v-if动态判断

    两个钩子函数：

        activated()：进入这个缓存组件时触发

        deactivated()：离开这个缓存组件时触发

十、说一下对vuex的理解？

    五种状态：

        state: 存储公共数据   this.$store.state

        mutations：同步操作，改变store的数据  this.$store.commit()

        actions: 异步操作，让mutations中的方法能在异步操作中起作用   this.$store.dispatch()

        getters: 计算属性   this.$store.getters

        modules: 子模块 

    使用场景：

        用户信息、菜单信息、购物车信息

    解决vuex页面刷新数据丢失问题的方式：

        办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）   

        办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据   

        办法三：在某一组件向后台请求远程数据保存在vuex，并且在页面刷新前将vuex的数据保存至sessionStorage。在另一组件优先使用vuex内的数据，只有刷新后还没取到后台数据，才会从sessionStorage里取。

            优点：每次刷新页面更新sessionStorage，确保数据的安全性。刷新后还没取到后台数据就从sessionStorage中取，防止网络延迟、数据量大时vuex数据丢失问题。

十一、说一下对MVVM的理解？

    M是model，指的是数据层，即data

    V是view，指的是视图层，即template

    VM是viewModel，指的是视图模型，即vue实例，是连接view和model的桥梁。数据和视图不能直接通信，必须经过VM实现通信。

十二、说一下vue2的响应式原理？

    vue2采用数据代理+数据劫持+发布订阅模式的方法。

    在初始化vue实例时，会把data对象和data对象的属性都添加到vm对象中，通过object.defineProperty()进行数据代理，用vm对象的属性来代理data对象的属性，

    并在Observer类中递归遍历data对象，对data对象中的每个属性都进行数据劫持，都指定一个getter、setter。

    例外的，对于数组，不能通过object.defineProperty()进行数据代理，因为监听的数组下标变化时会出现数据错乱问题，所以数组是调用数组重写的原生方法来实现响应式。

    当通过vm对象修改data对象中的属性时，会触发data属性的setter方法，然后触发它Dep实例的notify方法进行依赖分发，通知所有依赖的Watcher实例执行内部回调函数。

    最后会触发renderWatcher回调，会重新执行render函数，重新对比新旧虚拟DOM，重新渲染页面。

    【Watcher回调是异步任务，它的执行会遵循事件循环机制，且重复的Watcher回调不会放到任务队列中，所以多次重复数据更新时，只会重新渲染一次页面】。

    当通过vm对象读取data对象中的属性时，会触发data属性的getter方法，然后触发它Dep实例的depend方法进行依赖收集。

    当data对象中数组元素发生变化时，会调用数组重写的原生方法，然后触发它Dep实例的notify方法进行依赖分发，通知所有依赖的Watcher实例执行内部回调函数。

    最后会触发renderWatcher回调，会重新执行render函数，重新对比新旧虚拟DOM，重新渲染页面。

    当读取data对象中数组元素时，会触发数组的getter方法，然后触发它Dep实例的depend方法进行依赖收集。

十三、说一下v-model数据双向绑定原理？

    是一个语法糖，做了两件事

    v-bind绑定value，更新数据层

    v-on给元素绑定input事件，监听输入框中的内容，当发生改变时来执行一些事情，并更新视图层

十四、说一下$set的作用和原理？

    作用：

        对象：

            响应式原理：通过触发setter实现更新

            对象中后追加的属性、删除已有属性，Vue默认不做响应式处理

            解决：this.$set()

        数组：

            响应式原理：调用重写的原生方法实现更新

            数组中修改某下标的元素、更新length，Vue默认不做响应式处理

            解决：

                1. this.$set()

                2. 使用原生API：push、pop、shift、unshift、splice、sort、reverse

    原理：

        如果目标是数组，直接使用数组的splice方法通知实现更新

        如果目标是对象，先给对象属性用数据代理添加getter、setter，再通过触发setter通知实现更新

十五、说一下虚拟DOM的原理？

    虚拟dom是对真实dom的抽象，本质是JS对象

    在生成真实DOM之前，vue会把模板编译为一个虚拟dom，当里面某个DOM节点发生变动时，通过diff算法对比新旧虚拟DOM，发现不一样的地方直接修改在真实的DOM上

    优点： 

        可以减少DOM操作

        可以跨平台渲染

    缺点：

        严重依赖打包工具

        节点规模过大时，虚拟DOM的稳定性不如原生DOM

十六、说一下vue的模板编译过程？

    1、获取到template

    2、template 转 AST树

        AST树：

            抽象语法树（一个对象的格式）

            源代码的抽象语法结构的树状描述

            用于将vue的指令、语法等 转为 源代码的抽象语法结构

    3、AST树 转 render函数

        render函数：

            返回包含_c、_v、_s函数的字符串

    4、执行render函数 转 虚拟DOM

    5、执行patch方法，通过diff算法对比新旧虚拟DOM，打补丁，生成真实DOM

十七、说一下单页面应用和多页面应用的区别？

    单页面应用(SPA)：

        项目只有一个html页面，只向服务器请求一次静态资源，所有页面跳转都是通过路由组件切换完成的

        优点：页面跳转快、组件化开发

        缺点：首屏加载慢、不利于SEO

    多页面应用(MPA)：

        项目有多个html页面，每次页面跳转都要向服务器请求静态资源，返回新的html页面

        优点：首屏加载快、利于SEO

        缺点：页面跳转慢

        

十八、说一下CSS预处理器Less和Sass的区别？

    Sass和Less都属于CSS预处理器，都需要编译器编译成css文件运行

    一般常用的功能是：变量、运算符、混合、嵌套层级

    区别：

        1、编译环境不一样

            Sass基于Ruby环境

            Less基于JS环境

        2、变量符不一样

            Less是@，而Sass是$

        3、功能性不一样

            Sass功能性强大，有函数、条件判断、循环遍历、数据结构的概念

            Less没有

十九、说一下对跨域的理解？

    http请求分为两大类：普通http请求（如百度请求）和ajax请求（跨域是出现在ajax请求）

    同源策略：在浏览器发起ajax请求时，当前的网址和被请求的网址协议、域名、端口号必须完全一致，目的是为了防止跨站脚本攻击。

    跨域是浏览器的同源策略导致的，而服务器之间不受同源策略影响！！！

前端本地开发存在跨域，但前端部署到服务器上就不存在跨域了！！！

    解决方式：

        1、CORS跨域资源共享

        在配置类中，添加一个CORS的过滤器，在响应头上添加允许访问的请求源 addAllowedOrigin("*")

        2、Jsonp

        利用srcipt标签的src属性来实现，前端声明好一个函数，后端返回执行函数，执行函数参数中携带所需的数据。

        可以使用jquery的ajax快速实现Jsonp。

        使用jsonp只能解决get请求的跨域，因为script标签中的src请求就是get请求。

        3、vue脚手架正向代理

        跨域解决：vue脚手架自动在本地开启一个基于node的代理服务器，IP和端口号与本地浏览器相同

        浏览器【http://localhost:8080】 -> 本地代理服务器【http://localhost:8080】 -> 目标服务器【http://47.94.222.12:8080】

        4、Nginx反向代理

        跨域解决：location配置中，在响应头上添加允许访问的请求源 Access-Control-Allow-Origin:*

        浏览器【http://localhost:8080】 - Nginx代理服务器【添加放行请求源】 - 目标服务器【http://192.168.0.120:8080】

二十、说一下nextTick的使用场景和原理？

    等待DOM更新后，再执行内部传入的回调函数

    使用场景：  

        created中想要获取DOM

        响应式数据变化后获取DOM更新后的状态，如 获取列表更新后的高度

    原理： 

        把nextTick回调方法放在renderWatcher回调之后执行，这样就能拿到更新后的DOM

二十一、说一下对单向数据流的理解？

    概念：父级给子组件是啥，子组件可以用，也可以不用，但是不能修改【单向数据流针对于组件通信】

    

    作用：保证了数据的可控性，方便预测和调试

    注意：Vue中的单向数据流是针对基本数据类型，而引用类型是对数据地址的引入，子组件修改数据，父组件能接收到数据的更改

    应用：

        父子传参：子组件不能直接修改父组件的数据，要么通过props从父组件传递过来，要么通过emit在父组件中修改

        vuex：改变store中的状态state的唯一途径就是显式地提交mutation，不能直接修改state

- END -