Vue：面试题

供背书使用，内容比较简短，只限背书

文章目录

• vue 中如何封装一个组件
• Vue 中 computed 和 watch 的区别?
• vue 中插槽的理解
• v-show 和 v-if的区别
• 什么是 Vuex, 在那种场景下使用?
• Vue 路由的使用步骤
• 常见 Vue 组件库有哪些?
• vue的mvvm原理
• Vue 的生命周期
• Vue 实现数据双向绑定的原理?
• Vue组件的data为什么要使用return
• 父组件向子组件传递数据
• 子组件向父组件传递数据
• 兄弟组件间的传递数据?
• Vue 中有几种路由模式
• Vue路由导航守卫
• 路由中
  
  
  
  
  r
  
  
  o
  
  
  u
  
  
  t
  
  
  e
  
  
  和
  
  
  
  route 和
  
  
  route和router 的区别?
• vue 中 v-for的key 属性的作用？
• Vue 有哪些常用的事件修饰符?
• Vue 中如何解决插值表达式闪烁问题?
• 如何实现给样式添加作用域
• 动态添加一个路由规则
• 何优化页面的加载效率
• 路由懒加载
• keep-alive 组件的作用是什么
• vm.$nextTick(fn)有什么用
• 混入(mixin)有什么作用

vue 中如何封装一个组件

.vue文件内部是三部分组成, template 模板部分, script 逻辑部分, style 样式部分
一定要在 script 部分使用 es6 模块化的导出语法(export default{}), 进行导出

Vue 中 computed 和 watch 的区别?

computed 是计算属性,可以根据 data 中的数据成员,动态计算出一个新的数据成员，必须有返回值
watch 是监视器，监视 data 中某一个数据成员的改变或路由中的某些属性的改变, 可以根据这个改变, 做一些其他操作

vue 中插槽的理解

Vue 中的插槽分为三种, 匿名插槽, 具名插槽, 作用域插槽.
父组件调用子组件标签时，加入新内容

v-show 和 v-if的区别

v-show 是通过 css 的方式来隐藏元素, 而 v-if 是根据条件是否成立决定是否要创建元素.
如果某个元素需要频繁切换显示状态的话, 建议是使用 v-show

什么是 Vuex, 在那种场景下使用?

Vuex 是针对 vue 的一个状态管理工具. 有几个核心的部分。
state 存储状态数据;
mutations: 更新数据的方法,
actions: 调用 mutations 中的方法, 更新 state 数据;
getters: 对 state 中的数据进行预处理
使用场景：当组件的关系比较复杂的时候, 可以使用 vuex 简化组件间的传值.

Vue 路由的使用步骤

1，下载路由模块 vue-router
2，创建路由对象
3，配置路由规则
4，将路由对象注册为vue实例对象的成员属性

常见 Vue 组件库有哪些?

PC 端组件库: element-ui, ant-design, iview
移动端: mint-ui, vant, vux

vue的mvvm原理

1. 创建一个vue实例传入一个对象，vue遍历对象里的data对象，使用Object.defineProperty()得到data对象里所有属性的getter和setter。
2. 实例创建后，会创建一个watcher（观察者），setter触发后会通知观察者，观察者回调函数中调用实例的render方法，重新生成虚拟dom。
3. 虚拟dom：第一次渲染真实dom后，会生成一个虚拟dom，setter触发时（改变数据）通知观察者，观察者回调函数中调用实例的render方法，重新生成虚拟dom，新的虚拟dom会和之前的虚拟dom采用diff算法比较，最后操作真实dom。
4. diff算法：在dom树中分层比较。利用key属性唯一的特点，加快了效率。

Vue 的生命周期

○ beforeCreate(开始进行一些数据和方法的初始化)
○ created(已经完成数据和方法的初始化, data 中的数据和 methods 中的方法可以使用了),
○ beforeMount(开始渲染虚拟Dom)
○ mounted(已经完成了虚拟dom渲染，可以操作真实dom)
○ beforeUpdate(data中的数据即将被更新,会执行)
○ updated(data中的数据已经更新完毕,会执行)
○ beforeDestroy(vue 实例即将销毁, 此时 data 中的数据和 methods 中的方法依然处于可用状态)
○ destroyed(vue 实例已经销毁, 此时 data 中的数据和 methods 中的方法已经不可用)

Vue 实现数据双向绑定的原理?

Vue 是使用数据劫持, 结合发布者订阅者模式实现双向数据绑定的

Vue组件的data为什么要使用return

直接使用data的话，组件在多个地方使用会出现数据互相影响，使用return每次返回新对象，就避免了数据互相影响。

父组件向子组件传递数据

父组件调用子组件标签上加上自定义属性传数据，然后在子组件里用props接收

子组件向父组件传递数据

子组件里使用$emit调用父组件的自定义事件，然后在父组件自定义事件的方法里接收数据

兄弟组件间的传递数据?

暂缺

Vue 中有几种路由模式

hash,history;可以在创建路由对象的时候，使用mode属性来切换路由模式

Vue路由导航守卫

路由守卫是在页面进行路由跳转的时候做一些处理
全局前置守卫beforeEach
全局后置守卫afterEach
路由独享beforeEnter
组件内部beforeRouteEnter

路由中




r


o


u


t


e


和



route 和


route和router 的区别?

r


o


u


t


e


中


存


储


的


是


跟


路


由


相


关


的


属


性


(


如



route 中存储的是跟路由相关的属性(如


route中存储的是跟路由相关的属性(如route.params,$route.query) ;





r


o


u


t


e


r


中


存


储


的


是


和


路


由


相


关


的


方


法


(


如



router 中存储的是和路由相关的方法(如


router中存储的是和路由相关的方法(如router.push(),$router.go()),

vue 中 v-for的key 属性的作用？

Key 属性的作用是在数据层和视图层之间建立一一对应关系, 方便后期对页面进行局部更新. 如果某一条数据发生改变, 只更新当前数据对应的 DOM 元素.

Vue 有哪些常用的事件修饰符?

.prevent: 阻止默认事件;
.stop: 阻止冒泡;
.once: 事件执行一次;
.self：event.target是当前元素自身时触发处理函数

Vue 中如何解决插值表达式闪烁问题?

使用 v-html 或 v-text 替代插值表达式;
使用 v-clack 解决插值表达式闪烁

如何实现给样式添加作用域

style标签加上scoped属性

动态添加一个路由规则

router.addRoutes([{path:’’,component:’’}])

何优化页面的加载效率

使用路由懒加载和组件懒加载;
不要打包一些公共的依赖(vue, 组件库);
使用 CDN 加载这些依赖文件

路由懒加载

路由懒加载是指通过异步的方式来加载对应的路由组件(默认情况是将所有的组件全部加载并打包).

keep-alive 组件的作用是什么

keep-alive 可以将被包裹的组件暂存在内存当中, 当页面切换的时候, 组件不会被重复的销毁和创建, 从而可以提整体性能, 同时也可以保存组件的一些状态.

vm.$nextTick(fn)有什么用

延迟某个操作的执行，直到dom更新以后在执行

混入(mixin)有什么作用

分发 Vue 组件中的可复用功能，组件使用混入，就可以得到混入对象所有的属性和方法