vue面试题整理vuejs基础知识整理

初级参考

1.v-show 与 v-if 区别

v-show 是css隐藏，v-if是直接销毁和创建，所以频繁切换的适合用v-show

2.计算属性和 watch 的区别

计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。

所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。

说出一下区别会加分

computed 是一个对象时，它有哪些选项？

computed 和 methods 有什么区别？

computed 是否能依赖其它组件的数据？

watch 是一个对象时，它有哪些选项？

有get和set两个选项

methods是一个方法，它可以接受参数，而computed不能，computed是可以缓存的，methods不会。

computed可以依赖其他computed，甚至是其他组件的data

watch 配置

handler

deep 是否深度

immeditate 是否立即执行

总结

当有一些数据需要随着另外一些数据变化时，建议使用computed。

当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watcher

3.事件修饰符

绑定一个原生的click事件， 加native，

其他事件修饰符

stop（阻止事件冒泡） prevent（阻止默认事件）  self（只有自己触发，子组件不会触发）

组合键

click.ctrl.exact 只有ctrl被按下的时候才触发

4.双向绑定的原理

通过数据劫持和发布订阅模式方式实现的，核心的 API 是通过Object.defineProperty()来劫持各个属性的setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因。要实现双向绑定，首先进行数据劫持，所以需要设置一个监听器Observer，用来监听所有属性。如果属性发生变化，就需要告诉订阅者Watcher看是否需要更新。因为订阅者很多，所以需要一个消息订阅器Dep来专门收集这些订阅者，然后在监听器和订阅者之间进行统一管理，最后需要一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令（v-model，v-on）对应初始化一个订阅者Watcheer   ，并替换模板数据或绑定相应函数

官网解释：https://cn.vuejs.org/v2/guide/reactivity.html

5.怎么理解单项数据流

这是关于组件通讯中父组件的prop传递给子组件，在子组件中不能更改prop，只能父组件更改prop，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：

在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：

exportdefault{props: {value:String},  data () {return{currentValue:this.value    }  }}复制代码

如果是对 prop 值的转换，可以使用计算属性：

exportdefault{props: ['size'],computed: {normalizedSize:function(){returnthis.size.trim().toLowerCase();    }  }}

6.简述vue的状态管理并说明你在项目中哪些地方使用了

component通过mapactions或者dispatch将方法类型和负载传给actions，actions接收到后进行业务处理通过commit将处理后的类型和负载传给mutations，mutations不做业务处理，只根据接收的类型和负载将state中的数据进行突变，component通过mapgetters拿到更新后的仓库数据。

在组件中用mapactions接管methods方法，用mapgetters接收computed计算属性，这样主要是为了action更简洁，便于后期迭代更新。以下通过官网例子进行加深理解：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7.简述下生命周期钩子

vue实例从创建到销毁的过程，就是生命周期。从开始创建，初始化数据，编译模板，挂载DOM，渲染，更新再渲染，最后到销毁等一系列过程就是生命周期。

beforeCreate：数据观测和初始化事件还没开始

Created：完成数据观测，属性和方法的运算，初始化事件，$el属性还没显示出来

beforeMount：挂载前调用，相关的render第一次调用。实例已经完成编译模板，data里的数据和模板已经生成HTML，但没有讲HTML挂载到页面上

Mounted：el被新创建的Vm.$el替换，并挂载到实例上面调用。实例已经完成以下配置：用上面编译好的HTML内容替换el属性指向DOM元素。完成模板中HTML渲染到HTML页面中。此过程进行ajax交互。

beforeUpdate:发生在虚拟dom和打补丁之前，可以在该钩子中进一步修改状态，不会触发附加的冲渲染过程。

Updated：由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

8.组件中如何通信

九叔说要讲半小时左右：。。。。

父到子：

传<子组件 :自定义属性=“父数据”>

收：子组件选项props：【‘自定义属性’】

子到父：

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

非父子，兄弟组件通讯：

可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。

组件通讯更详细解释

9.路由守卫是什么，有几种方式

全局守卫，路由独享守卫，组件内部守卫；

全局守卫：

router.beforeRouteEnter(to,from,next){前置守卫，进入}

router.beforeRouterLeave(to,from,next){后置守卫，离开}

to  目标路由  from   当前路由

next函数：next() == next(true) 运行跳转

next(false) 不让跳转

next('字符路径')/next({对象路径}) 重定向

路由独享守卫：没有后置守卫

{

path: '/foo',

component: Foo,

beforeEnter: (to, from, next) => {

// ...

}

}

组件内部守卫：

const Foo = {

template: `...`,

beforeRouteEnter (to, from, next) {  前置

// 在渲染该组件的对应路由被 confirm 前调用

// 不！能！获取组件实例 `this`

// 因为当守卫执行前，组件实例还没被创建

},

beforeRouteLeave (to, from, next) { 后置

// 导航离开该组件的对应路由时调用

// 可以访问组件实例 `this`

}

}

10.vue的优化

不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退

11.什么是插槽或内容分发 ，插槽有几种方式

组件内部保留槽位:

具名槽位:<slot name=槽名

匿名槽位: <slot></..>

调用组件插入内容:  内容 == dom | 组件

<组件名>

<template #槽名> 内容 | <组件名>

<template v-slot:槽名>内容

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译

12.简述下mvvm和MVC

MVC：

 

 

1.View 传送指令到 Controller

2.Controller 完成业务逻辑后，要求 Model 改变状态

3.Model 将新的数据发送到 View，用户得到反馈

MVP：

 

 

1. 各部分之间的通信，都是双向的。

2. View 与 Model 不发生联系，都通过 Presenter 传递。

3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM：

 

 

和MVP很像，采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然

13.路由懒加载，异步路由，分片打包

原理: 把组件封装到一个函数内部，路由激活时，调用该函数，函数内部 异步加载目标组件并返回

路由配置router.js:

a)

- import home from "../components/home.vue"

+ const home =()=>import("../components/home.vue");

{path:'/home', component: home }

b)

{path:xxx, component: r => { require(['./login/Login'], r) }}

15.vue的数据是响应式的，请问什么时候是非响应式的并如何解决

a:数组数据：

问题1：通过改变长度，利用索引直接设置跟项

解决：Vue.set(数组对象, key, value)                        |                vm|this.$set(数组对象, key, value)

问题2：对数组使用了非变异 (non-mutating method) 方法（返回的了新数组）

解决：对象合并

对象数据变化：

问题：问题：data:{a:1}；a 数据是响应式的；vm.b='qq';  b 属性不是响应式的

解决：Vue.set(对象, key, value)                            |                            vm|this.$set(对象, key, value)

总结：数据一开始就应该出现在data里，数组里面永远不要放置简单性数据

16.如何编写一个自定义指令

指令是个函数或者对象，用来操作dom，指令内部的this指向window；

a:全局指令  Vue.directive（指令名称不带v-,回调（el,bingding））

el:dom元素；binding是个对象，含有传入的参数，binding。value

b:局部  定义在选项里面

directives:{

指令名不带v- : 函数(el,binding){}

}

17.如何自定义事件

定义：vm.$on( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )

销毁：vm.$off( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )

触发: vm.$emit(自定义事件名1,参数)

自定义事件名： 使用 kebab-case 的事件名

场景： 在一个组件实例上手动侦听事件时

18.懒加载，按需加载，点击加载，滑动加载

把组件加载封装在一个函数中，路由激活的时候调用这个函数，这个函数在运行的时候去加载这个组件。加载用import或者requireAPI

19.如何更改计算属性并响应式

计算属性的set方法

 

 

 

 

 

 

20.vue的diff算法

突然发现弄懂这个就不是初级了。。。

https://juejin.im/post/5c97002b6fb9a070aa5cf60b

作者：将心比心_59bf
链接：https://www.jianshu.com/p/875c9069dfc2
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。