Vue面试题

1.了解MVVM

MVC:数据model 视图view 控制器controlle   前后端无法独立开发 依赖后台

MVVM：数据model  视图view  控制数据改变视图更新viewModel  

html部分相当于View层， View层通过模板语法来声明式的将数据渲染进DOM元素 

ViewModel对Model进行更新时，通过数据绑定更新到View ViewModel层的核心是双向数据绑定

当Model层视图发生更新时，ViewModel也让Model层发生变化

2.v-model原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，数据变动时触发相应的监听回调达到数据视图同步

v-model是  ：value 和 @input的联合使用

3.vue中data为什么是函数

利用了闭包的思想，vue是单页面应用，组件式开发，每一个组件中都有一个data

通过函数闭包的思想，外层还是访问不到内存函数的变量

形成私有的作用域，使数据之间不会相互影响

4.v-if和v-show的区别

v-if是通过添加和删除DOM元素来进行显示或者隐藏

v-show是通过操作DOM元素样式来进行显示和隐藏，适用于需要频繁切换元素显示的场景

5.v-for中为什么需要有key

key可以有效的提高虚拟DOM的更新效率 

Vue使用就地复用的策略，操作DOM元素的时候，没有key值容易造成选项混乱

key只能是字符串或者number类型 开发中使用每条数据的唯一标识作为key。

6.虚拟DOM中key的作用

key是虚拟DOM对象的标识，当数据发生变化时，vue会感觉新数据产生新的虚拟DOM,新的虚拟DOM和旧的虚拟DOM比较key值，key值相同比较内容，内容相同就地复用，不同替换。

7.打包后dist目录过大，解决办法？

1.删除dist打包生成的.map文件

2.组件和路由使用懒加载，按需引入

3.对文件图片进行压缩。图片后缀

8.watch和computed的区别

watch和computed会自动执行预先定义的函数 watch功能强于computed

computed：计算属性，依赖其他属性的值。具有缓存，只有他依赖的值发生变化，下一次取当前属性时才会重新计算，避免了每次取值的重新计算。

watch：侦听器，当侦听的值发生改变时，其他变化会跟着改变有些操作也会被触发，watch中可以使用异步操作，当需要数据变化时执行异步或进行开销比较大的操作时，使用watch监听接收两个参数

9.vue组件间的数据传递

1.父子组件

父->子：父组件给子组件身上绑定自定义属性，子组件里使用props属性进行接收

子->父：调用函数传值  通过$emit自定义事件传值 

通过父组件给子组件绑定ref，子组件调用$refs $on传值

2.兄弟组件

事件总线Bus，全局事件bus挂载到vue的原型上，所用的组件都可以使用

兄弟A，通过$emit触发自定义事件，传递数据

兄弟B，通过$on监听自定义事件，接收数据

3.爷孙组件

爷爷组件provide要传递的数据

孙子组件inject接收数据

10.性能优化

1.减少请求  使用状态机维护多处使用的数据

2.减少重定向

3.使用懒加载图片和路由

4.减少频繁反复的DOM元素操作

5.使用外部js脚本和css样式

6.压缩脚本，样式，图片，字体

7.减少DNS查询

11.Vue

响应式，渐进式，组件化，轻量级，虚拟dom，单页面

12.Vue生命周期

beforeCreate  组件实例背创建之初，组件的属性生效之前  可以绑定loading事件

created  组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el 不可用

结束loading事件  异步请求

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

mounted  el被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子  

挂载元素   获取DOM节点

beforeUpdate  组件或者实例数据更新之前调用，发生在虚拟DOM打补丁之前

update 组件或实例数据更新之后

数据的统一处理

beforeDestory  组件或实例被销毁之前调用

destoryed  组件或实例被销毁后调用

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

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

errorCaptured  在捕获一个来自后代组件的错误时被调用

13.Vuex

Vuex是一个专为Vue的状态管理工具，主要用于多页面，多状态之间的通信

vuex中有state，getter，mutation，action，module五个属性

state存储数据 getter相当于计算属性computed

mutation是用来更改Vuex的store中的状态的唯一方法，在aciton中调用store.comiit来触发

aciton提交给mutation，不能直接变更状态，Aciton可以保护任意异步操作，通过store.dispatch

14.Vuex和localStorage的区别

vuex存储在内存，localStorage文件存储在本地

localstorage只能存储字符串类型的数据，存储对象需要使用JSON的stringify和parse处理

vuex是vue的状态管理工具，用于组件之间的传值，在跨页面传递数据时使用

vuex能做到数据的响应式，localstorage做不到，vuex存储值在刷新页面时丢失

15.Vue-router

vue-router时vue.js官方路由管理器，vue的单页应用时基于路由和组件的，路由用于设定访问路径

组件：router-link，router-view路由出口

16.Vue-router实现原理

Vue是单页面应用(SPA)程序，只有一个完整页面，在加载页面时，更新视图而不重新请求页面

根据不同mode参数来选择hash还是history模式

Hash模式：vue-router默认模式，使用url的hash来模拟一个完整的url，hash（#）是url的描点，hash用来指导浏览器动作，改变hash后的路径都会在浏览器的访问历史中增加一个记录，使用后退可以回到上个位置，hash模式通过描点值的改变，根据不同的值，渲染指定Dom位置的不同数据。hash模式原理是监听onhashchange事件，在window对象上监听事件，通过window.hash获取url后面的hash值

History模式：利用H5 History Interface中新增的history.pushState history.replaceState  API来完成url跳转需要后台配置支持  服务器未响应会报404 无需重新加载页面

abstract模式

17.使用路由模块来实现页面跳转的方式

直接修改地址栏

this.$router.push('路由地址')

<router-link to='路由地址'></router-link>

18.$router和$route的区别

router是VueRouter的实例，是一个全局的对象，通过vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,router包含了路由跳转的方法，钩子函数

route是路由信息对象|跳转的路由对象，每一个路由都有一个route对象，是一个局部的对象，可以获取对应的name，path，params，query等

19.Router的导航钩子

全局前置导航守卫：router.beforeEach

全局解析守卫：router.beforeResolve

全局后置钩子：router.afterEach

路由独享的守卫：beforeEnter

组件内守卫：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave

20.路由懒加载

把不同路由对应的组件分割为不同的代码块，当路由被访问是才加载对应的组件

21.Vue单向数据流

所有的prop都使得其父子prop之间形成一个单向下行绑定：父级prop的更新会向下流动到子组件中，会防止子组件改变父组件的状态，只有当父组件更新时，子组件中的prop都会刷新为最新的值

22.vue-cli工程都用到了哪些技术，作用分别是什么？

1.vue.js:vue-cli工程的核心，主要特点是双向数据绑定和组件系统

2.Sass，Less

3.vue-router：vue官方推荐使用的路由框架

4.vuex：专为Vue.js项目开发的状态管理器，主要用于维护vue组件间共用的一些变量和方法

5.axios：用于发起GET,POST等请求，基于promise设计的

6.element-ui/vant-ui组件库

7.emit.js文件，用于vue事件机制的管理

8.webpack：模块加载和vue-cli工程打包器

23.v-if和v-for（修）

v-if和v-for不建议一起使用，在Vue2中v-for具有比v-if更高的优先级，意味着v-if将分别重复运行于每个v-for循环中，即先运行v-for循环，在v-for循环中进行v-if条件对比，先把元素遍历后判断隐藏，进行不必要的dom渲染，会造成性能问题，而在Vue3中v-if具有比v-for更高的优先级

24.自定义指令

局部指令 new Vue（{directives：{指令名：配置对象}） 或 new Vue（{directivea（）{ } }）

全局指令 Vue.directive（指令名，配置对象） 或Vue.directive(指令名，回调函数)

自定义指令在定义时不需要v-  在使用时要加v-  配置对象钩子函数 

bind 指令与元素成功绑定时调用

inserted 指令所在元素被插入页面时调用

update 指令所在模板结构被重新解析时调用

25.nextTick

vueDom的更新机制：vueDom采用异步更新，当数据发生改变时，dom不会立即同步更新，而是在下一次回调中更新dom，状态多次发生改变，dom只更新一次

nextTick可以实现数据更新dom同步更新

Vue.nextTick().then(() => { 获取更新后的dom })

Vue.nextTick(() => { 获取更新后dom })

this.$nextTick(() => { })

vue3之后 nextTick小钩子函数  await nextTick()  nextTick(() => { })

26.ref和reactive区别

1.ref的值可以接收任意数据类型

2.reactive只能接收对象数据类型( object，array，new Map()，new Set() )

3.reactive不能替换整个对象，会丢失响应性

4.不能使用解构的方法来使用reactive中的属性，会丢失响应性