Vue 面试题

vue的基本原理

当vue实例创建时，会遍历data中的所有属性，并给其转化为getter/setter当数据发生变化时会通知变化，每个组件都有相应的watcher实例，它会给每个属性添加上依赖，
当发生变化时候会通知依赖进行重新计算，从而使组件得以更新

双向绑定原理

数据劫持和发布订阅者模式实现
1.vue2 通过 Object.defineProperty 进行数据劫持监听数据的变化并通过 getter 和 setter 的方法对数据进行读写
2.vue 通过发布订阅模式维护一个订阅者数组，当数据发生变化时会通知所有订阅者进行更新
3.watcher 《=》 dep《=》 observer

标题object.defineProperty来进行数据劫持有什么缺点

在对一些属性发生改变时它可能检测不到，例如数组，只是vue内部通过函数的方法解决了这一问题
object.defineProperty进行数据劫持时是对对象的某个属性进行劫持，从而需要对每个属性进行遍历，如果属性是对象还需要深度遍历
proxy不同他是劫持整个对象并返回一个新的对象，proxy不仅能劫持代理对象还可以代理数组，还可以代理动态增加的属性

标题mvc mvp mvvm的区别

mvc = model=>view=>controller=>model
这样的缺点是 model层还是和view层之间没有解耦 当项目大的时候就会出现代码赘余和混乱不利于代码的维护
mvvm = model<=>vm<=>view
大量的数据操作在vm中实现 数据发送变化就会直接改变view层 model层和view层完全解耦 代码结构清晰利于维护
mvp =model<=>presenter<=>view
model和view完全解耦 但是presenter还有其他业务逻辑

computer和watch的区别

computed 支持缓存 watch不支持缓存
computed 在页面刷新的时候会触发 watch不会如果想第一次就触发的话觉得给其定义一个属性immediate
computed 不支持异步操作，异步操作监测不到 watch 支持异步操作
computed 必须有返回值 watch不需要
使用场景 computed用于购物车这样的场景（多个值影响一个值的时候） watch 用于搜索这样的场景（一个值影响多个值的时候）

computed和methods的区别

computed依赖于缓存和属性，只有属性发送变化的时候才会重新计算
methdos调用总是会执行函数

slot是什么？有什么作用？原理是什么？

1.slot是插槽
2.当一个组件需要内需要用到不同的属性值或样式时就会用到插槽，显示不同内容
3.当子组件实例化的时候,获取到父组件传入的slot标签的内容，存放到vm.$slot中，默认插槽则为vm.$slot.default ，具名插槽则为vm.$slot.name,作用域插槽:可以是匿名插槽也可以是具名插槽，改插槽是子组件给父组件传递数据，如何通过slot标签进行显示，显示子组件作用域内的内容

过滤器的作用，如何实现一个过滤器

以及淘汰了
filters来定义基本逻辑 然后通过{{ date| xxx}}实现逻辑过滤得到想要的数据

如何保存页面当前的状态

1.页面组件被卸载
1.2通过localstorage和sessionStorage中的state进行保存当你指定重某个页面跳转到这个页面时触发获取state，可以在其中定义一个flag指定从A=>B时保存当前状态
缺点：json深拷贝当出现Reg或date类型的数据时得到的不是原来的值而是一个字符串
1.1.路由传值
通过router-link prop 或者to传递参数返回这个页面时则又带回这个数据
2.页面组件不卸载
2.1单页面渲染，父组件保存子组件中state
2.2keep-alive
它会多出两个生命周期钩子
activated deactivated
进入时判断是否是要保存的信息页面 就不重新获取页面内容
离开时做操作

常见的事件装饰器及其作用

.stop 防止冒泡事件的发生 等同于event.stopPropagation
.prevent 取消默认事件 等同于 event.preventDefault
.capture 捕捉事件 重外到内
.self 只会触发自己范围内的事件 不包含子元素
.once 只会触发一次

v-if/v-show/v-html原理

v-if会调用 additCondition方法，生成vnode时候会忽略对应节点，render的时候就不会渲染
v-show 会生成vnode render的时候就会修改对应节点的css属性添加display：black
v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。

v-if和v-show的区别

v-if是动态的向dom书添加或显示dom元素，v-show则是设置dom元素的css display属性来显示隐藏

v-model原理

实际计算v-bind:value和 v-on:input
v-on绑定事件 v-bind绑定数据和元素属性
当input 发生变化的时候 触发改变 v-bind：value绑定的值实现数据响应式

v-model可以用在自定义组件上么上吗

同理用到了 v-bind:value 和 自定义事件 $emit 获取 $on绑定

data为什么不是对象而是函数

如果为对象的话多个组件使用会出现变量混乱的清空，一个变量修改会影响多个页面，函数则不会只会影响自己的页面

对keep-alive的理解，它是如何实现的，具体缓存的是什么

keep-alive有三个属性 include exclude 白名单和黑名单 max 最多缓存组件数

$nextTick原理及作用

vue的nexttick其本质是对javascript执行原理Eventloop的一种应用
nextick的核心是利用promise 和 mutationObserver ,setimmediate,settimeout等原生JavaScript方法来模拟对应的微/宏任务的实现，本质是利用javascript的这些异步回调任务队列来实现vue框架中自己的异步回调队列
其实就是有时候数据发生了变化 dom没有及时更新 如何想要用到 $nexttick来恢复vue异步回调操作实现数据于页面同步

vue中给data中的对象属性添加一个新的属性时会发生什么?如何解决

没有在data中定义的属性 如果在事件中进行添加的话 那数据就不是响应式的，想要通过vc.$set把数据变成响应式的这样数据变化的时候就会影响页面更新了

vue封装的数组方法有那些，如何实现页面的更新

push() pop() shift() unshift()splice()sort()reverse()
简单的来说就是重写了数组的那些原生方法，首先获取到这个数组的__ob__,也就是它的observer对象，如果有新的值，就调用observerArray继续对新的值观察变化，然后手动调用notify，通知渲染watcher，执行update
通俗讲就是 重写这些方法，获取到这些方法的监视对象，如果有新的值，就调用这个监视对象的Array继续监视，然后手动调用notify，通知watcher 执行update

vue单页面应用与多页面应用的区别

spa单页面：其实就是一个主页面 然后由不同的组件构成，然后组件可以显示不同路由下的页面内容
mpa多页面应用：指有多个独立页面的应用，每个页面必须重复加载js，css等相关资源，多页面应用跳转，需要整页资源刷新