Vue相关问题（持续更新）

---

title: Vue相关问题
date: 2019-10-12 20:23:00
updated: 2019-10-12 20:23:00
tags: ['web前端面试']

---

Vue相关问题

1. Vue.js介绍

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；

Vue.js是一个构建数据驱动的Web界面的库。

Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

简而言之：Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

2. 谈谈你对vue的双向数据绑定原理的理解

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.definePorperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指定（解析{{}}），最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化input->数据model变更的双向绑定效果

3. vue中常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

4.v-if 和 v-show 区别

v-if按照条件是否渲染，v-show是display的block或none

5. MVVM 关键要素分析

• 响应式：vue 中的 data 数据，随便一改动，视图就能随着变化——如何监听这个变化的呢？
• 模板解析：模板看似是 html 但是它不是，因为它有指令，因此它是有逻辑的、动态的，而 html 只是静态的
• 渲染：页面一加载的显示，以及 data 变化之后的显示，如何做到的？特别是 rerender ，不能变化一点数据，页面全部都重新渲染。

6.vuex五个核心属性

https://blog.csdn.net/wh710107079/article/details/88181015

state, getters, mutations, actions, modules

主要包括以下几个模块：

• State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
• Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
• Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
• Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

7. Vue 中 computed、methods、watch三者的区别

https://blog.csdn.net/ly124100427/article/details/81328225

8. vue数据双向绑定原理

Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新

var obj = {}
    var _name = '咱三'
    Object.defineProperty(obj, "name", {
        get: function() {
            console.log('get')
            return _name
        },
        set: function(newVal) {
            console.log('set')
            _name = newVal
        }
    })

    console.log(obj.name)
    obj.name = 'lisi'

9. vue路由

• vue路由的两种模式，hash与history

  对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——— 改变视图的同时不会向后端发出请求。

  一、为了达到这个目的，浏览器提供了以下两种支持：

  1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。

  比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

  2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持）

  这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。

  history模式，会出现404 的情况，需要后台配置。

  二、404 错误

  1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；

  2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

• router跳转方法

  router.push(location, onComplete?, onAbort?)
  router.replace(location, onComplete?, onAbort?)
  router.go(n)
  

• router传递参数

  // url/:id/:name
  router.push({'name':'routerName', 'params':{'id':'1', 'name':'lxl'})
  // 获取参数方式
  let id = this.$route.params.id;
  
  // url?id=1&name=lxl
  router.push({'path':'/resigner', 'query':{'id':'1', 'name':'lxl'})
  // 获取参数方式
  let id = this.$route.query.id;
  
  

10. 说一下对mvvm的理解

* MVVM  ---   Model -View- ViewModel
* 三者之间的联系，以及如何对应到各段代码
* ViewModel的理解，联系View和Model

11. vue中如何实现响应式

* 关键理解Object.defineProperty
* 将data的属性代理到vm上

12. vue中如何解析模板

* 模板：字符串，有逻辑，迁入js变量
* 模板必须转换为js代码（有逻辑，渲染html，js变量）
* render函数是什么样子的
* render函数执行是返回vnode
* updateComponent

13. vue的整个流程

* 第一步，解析模板成render函数
* 第二步，响应式开始监听
* 第三步，首次渲染，显示页面，且绑定依赖
* 第五步，data属性变化，触发render

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

（1）生命周期是什么？

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

（2）各个生命周期的作用

生命周期	描述
beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive 专属，组件被激活时调用
deadctivated	keep-alive 专属，组件被销毁时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

补充： Vue / keep-alive
https://www.jianshu.com/p/4b55d312d297

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

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

16. 使用Vue的好处

vue两大特点：响应式编程、组件化

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

17. vue首屏加载做过哪些优化

• 使用CDN资源,减小服务器带宽压力
• 路由懒加载
• 将一些静态js css放到其他地方（如OSS），减小服务器压力
• 按需加载三方资源，如iview,建议按需引入iview中的组件
• 使用nginx开启gzip减小网络传输的流量大小
• 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
• 使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件

18. VUE路由的hash模式与history模式的区别

https://blog.csdn.net/onlyhqm/article/details/85342532
https://blog.csdn.net/lyn1772671980/article/details/80804419

19. vue路由实现原理

https://segmentfault.com/a/1190000014822765?utm_source=tag-newest

20. 使用vue打包，vendor文件过大，或者是app.js文件很大https://www.cnblogs.com/wjunwei/p/9242142.html

21. vue路由懒加载及组件懒加载

https://www.cnblogs.com/-roc/p/9983177.html

22.VUE 组件通迅有哪些方式？

https://blog.csdn.net/mashibing_web/article/details/110821646