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算法
突然发现弄懂这个就不是初级了。。。
作者：将心比心_59bf
链接：https://www.jianshu.com/p/875c9069dfc2
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
