请简单描述一下vue的生命周期
beforeCreate、实例了Vue但还没进行数据初始化与响应式处理
created（此时需说明可以在created中首次拿到data中定义的数据）数据已被初始化和响应式处理，在这里可以访问到数据，也可以修改数据
beforeMount、render函数在这里被调用，生成虚拟DOM，但是还没有转成真实的DOM并替换到el
mounted（此时需说明dom树渲染结束，可访问dom结构）、在这里，真实DOM挂载完毕
beforeUpdate、数据更新后，新的虚拟DOM生成，但还没跟旧虚拟DOM对比打补丁
updated、新旧虚拟DOM对比打补丁后，进行真实的DOM的更新
activated：被keep-alive缓存的组件被激活时调用
deactivated：被keep-alive缓存的组件停用时调用
beforeDestroy、实例销毁之前调用，在这一步，依然可以访问数据
destroyed：实例销毁后调用，该钩子被调用后，对应Vue实例的所有指令都被解绑，所有的监听器被移除，所有的子实例也都被销毁
请阐述一下你所理解的MVVM模式
vue是采用数据劫持配合发布者-订阅者模式的方式，通过Object.definerproperty()来劫持各个属性的setter和getter，在数据变动时，发布消息给依赖收集器，去通知观察者，做出对应的回调函数，去更新视图。
详细的说一说，MVVM作为绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听model数据变化表通过compile来解析编译模板指令，最终利用Wather搭起Observer，Compile之间的通信桥梁，达到数据变化更新视图；视图交互变化—>数据model变更的双向绑定效果。
v-if和v-show的区别
v-if:
-
v-if会控制这个DOM节点的存在与否 -
v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁 - 如果在运行时条件很少改变，则使用v-if比较好
v-show:
-
v-show是通过控制dom元素的css样式来实现显隐，不会销毁 -
v-show仅仅控制元素的显示方式，通过display的属性none - 当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销
vue-router的hash和history的区别
hash 是根据页面锚点实现跳转
history是通过浏览器API实现锚点
Vue组件如何通信？
- 父传子：props
- 子传父：#emit $on
- 兄弟之间通信 eventBus vuex
- 获取父组件实例的方式
children
- 使用$refs获取组件实例，进而获取数据
- 使用vueX进行状态管理
+使用浏览器本地缓存，例如localStorage
$nextTick用过吗，有什么作用
在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM（官网）
解决的问题：有些时候在改变数据后立即要对dom进行操作，此时获取到的dom仍是数据刷新前的dom，无法满足需要，这个时候就用到了$nextTick
为何Vue采用异步渲染？
理解：vue是组件级更新
如果不采用异步更新，那么每次更新数据都会对当前组件进行渲染，所以为了性能考虑，vue会在本轮数据更新后，再去异步更新视图
什么场景下是必须用watch
父传子的时候
双向数据绑定双层数组不能绑定？？
使用$set来设置属性
v-model的原理
v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。
其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值
vue中v-html会导致哪些问题
- 可能会导致xxs攻击
- v-html会替换掉标签内部的子元素
什么是作用域插槽？
1、插槽
- 创建组件虚拟节点时，会将组建的儿子的虚拟节点保存起来，当初始化组件时，通过插槽属性将儿子进行分类
{a:[vnode],b:[vnode]} - 渲染数组时会拿对应的slot属性的节点进行替换操作（插槽的作用域为父组件）
2、作用域插槽 - 作用域插槽在解析的时候，不会作为组建的孩子节点，会解析成函数，当子组件渲染时，会调用此函数进行渲染（插槽的作用域为子组件）
谈谈你对keep-alive的了解？
理解：keep-alive 可以实现组件的缓存，当组件切换时不会对当前组件进行卸载，常用的两个属性include/exclude，2个生命周期activated，deactivated LRU算法
如何使用Promise来同时请求多个数据
将所有的异步请求的结果放入一个数组
使用 Promise.all 来处理
加 .then ,将成功或是失败的结果都 return 出去
失败的结果处理一下再return
Vue和JQuery的区别在哪里？为什么放弃JQuery用Vue？
1、JQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据即可
2、JQuery的操作DOM是频繁的，而Vue利用虚拟DOM技术，大大提高了更新DOM时的性能
3、Vue中不提倡直接操作DOM，开发者只需要把大部分精力放在数据层面上
4、Vue集成的一些库，大大提高开发效率，比如Vuex、router等
为什么data是一个函数并且返回一个对象呢？
data之所以是一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data并返回新的数据对象，这样，可以避免多处调用之间的数据污染。
路由有哪些模式呢？又有什么不同呢？
hash模式：通过#号后面的内容梗概，触发hashchange事件，实现路由切换
history模式：通过pushState和replaceState切换url，触发popstate事件，实现路由切换，需要后端配合
computed和watch有何区别？
- computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作
- watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作
- 简单记就是：一般情况下computed是多对一，watch是一对多
直接arr[index] = xxx无法更新视图怎么办，为什么，怎么办？
原因：Vue没有对数组进行Object.defineProperty的属性劫持，所以直接arr[index] = xxx 是无法更新视图的
使用数组的splice方法 arr.splice(index，1，item)
使用Vue.$set(arr,inde,value)
网友评论