vue基础面试题

1、vue的双向绑定原理是什么

通过数据劫持结合发布者-订阅者模式的方式实现的，具体过程如下：
实现数据双向绑定，首先是对数据进行劫持监听，所有需要设置一个ObServer，用来监听所有属性。如果属性发生变化，就需要告诉订阅者Watcher看是否需要更新，因为订阅者有很多，所以还需要一个消息订阅器Dep来专门收集这些订阅者，然后在监听器ObServer和订阅者Watcher之间进行统一管理还需要一个Complie解析器 对每个节点元素进行扫描和解析。 将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相对应的函数。 此时，当订阅者Watcher接收到相应属性的变化。就会执行对应的更新函数。从而更新视图。
1).首先需要对数据进行劫持监听，所以需要实现一个监听器Observer，用来监听并劫持所有属性，如果有变动 就通知订阅者
2).实现一个订阅者Watcher,可以收到属性的变化通知并执行相对应的函数，从而更新视图。
3). 实现一个解析器Compile 可以扫描和解析每个节点的相关指令 并根据初始化模板以数据及初始化相对应的订阅器。

2、vue两个核心是什么

数据驱动和组件化

3. v-if 和 v-show的区别

相同点： 都是判断DOM节点是否需要显示
不同：
a、实现方式： v-if是根据后面数据的真假判断直接从DONM树上删除或者重建元素。v-show只是修改元素的CSS样式。元素始终都在DOM树上。
b、编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中会合适的销毁和重建内部的事件监听子组件，v-show只是基于css的切换。
c、编译条件：v-if是惰性的，如果初始条件为假，则什么都不做。只有在条件第一次变为真才会去编译，v-show是在任何条件下都会被编译，然后被缓存。而且DOM元素一直都存在。

4、vue常用的修饰符

a、按键修饰符：delete keyup 用法都和事件修饰符一样 挂在v-on的后面
b、系统修饰符：可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
ctrl .alt .shift .meta
c、 鼠标修饰符
.left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮。
d、事件修饰符
.stop 等同于JavaScript中的event.stopPropagation() 防止事件冒泡
.prevent 等同于JavaScript 中的event.preventDefault() 防止执行预设行为。用于取消默认事件。
.capture 与事件冒泡的方向相反 事件捕获由外到内。
.self 只会触发自己 范围内的事件 不包含子元素
.once 只会触发一次
e、.lazy
在默认情况下 v-model在每次input事件触发后将输入框的值与数据进行同步 我们可以添加lazy修饰符 从而转变成 change事件进行同步
f、.number
如果想自动将用户的输入值变成数值类型 可以给 v-model添加 .number
g、.trim
自动过滤 用户输入非首位空白字符 可以给v-model 添加 trim

5、 vue中key的作用

使用key来给每一个节点做一个唯一的标识
key的作用主要是为了高效的更新DOM
另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，
否则vue只会替换其内部属性而不会触发过渡效果。

6、Vue中为什么data必须是一个函数

在 new Vue()中 data是可以作为一个对象进行操作的。
然而在compoents中 data只能是以函数的形式存在。不能直接将对象赋值给它。
当data是一个函数的时候 每个实例对象 可以维护一份被返回对象的独立拷贝，这样各个实例中的data不会互相影响，是独立的。

7、vue中子组件调用父组件的方法

a、直接在子组件中通过this.emit向父组件触发一个事件 父组件监听这个事件就好了
c、父组件把方法传给子组件，在子组件中调用这个方法

8、vue中父组件调用子组件的方法

父组件利用 ref 属性 操作子组件的方法

9、vue组件之间的传值

a、 父组件调用子组件的时候动态绑定属性
b、子组件定义props接收动态绑定的属性
c、子组件也可以使用$emit 把值传给父组件

10、vue页面级组件传值

a、使用vue-router通过跳转链接带参数传参
b、使用localStorge
c、使用vue数据管理传值，

11、动态组件

多个组件通过同一个挂载点进行组件的切换 is的值是哪个组件的名称 那么页面就会显示哪个组件

12、keep-alive

可以让当前组件或者路由不经历创建和销毁 而是进行缓存
凡是被kepp-alive包裹的组件 除了第一次使用外 不会经历创建和销毁阶段 第一次被创建后就在缓存中了。

13、怎么定义vue-router的动态路由？怎样获取传过来的值

动态路由创建，主要是使用path属性 使用动态路径参数 以冒号开头

    {
        path:'/details/:id',
        name:'Details',
        components:Details
    }

当匹配到/details下的路由时 参数会被设置到this.route.params.id

14、vue-router有哪几种路由守卫

全局前置守卫：router.beforeEach
后置守卫：。router.afterEach
全局解析守卫：reouter.beforeResolve
路由独享守卫：beforeEnter
组件内部的守卫：beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave

15、route的区别

route 是路由信息对象 跳转的路由对象 每一个路由都会有一个route对象 是一个局部对象 包含了path、params、hash、query、name、matched等

16、vue-router响应路由参数的变化

a、watch监听
b、组件内部 导航钩子函数 beforeRouterUpdate(to,from,next)

17、vue-router 传参

使用Params: 只能使用name， 不能使用path参数 不会显示在路径上 你浏览器强制刷新参数会被清空
使用Query： 参数会显示在路径上，刷新不会被清空 name 可以使用path路径

18、说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)
v-for(把数据遍历出来)
v-bind(绑定属性)、v-model(实现双向绑定)

19、MVVM 和 MVC的区别

MVVM ---> Model-View-ViewModel 即模型-视图-视图模型。
模型 --> 后端传递的数据。
视图 --> 所看到页面。
视图模型 --> 是 mvvm的核心 它是连接view 和model的桥梁 有两个方向
a、将模型转换成视图，即将后端传回的数据转成所看到的页面。 实现方式 数据绑定
b、将视图转换成模型，即将所看的页面转换成后端的数据 实现方式 是DOM事件监听，这两个方向都是闲的 我们称之为 双线数据绑定

MVC --> Model - View - Controller 即模型 - 视图 - 控制器
M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面的业务逻辑
使用MVC的目的 是将M和V的代码分离。MVC是单通信。

20、Vue 的 nextTick 的原理是什么？

a、 为什么需要nextTick
Vue是异步修改DOM 并且不鼓励开发者去直接修改DOM 但有时候业务需要必须对数据进行更改 刷新后的DOM做对应的处理 这个时候就可以使用Vue.nextTick(callback)这个api
b、理解nextTick
原理：vue通过异步队列控制DOM更新和nextTick回调函数先后执行的方式。
*** vue响应式的改变一个值 以后 此时DOM 并不会立即更新 如果需要在数据改变以后立即通过DOM做一些操作 就可以使用$nextTick获得更新后的DOM。

21、Proxy 与 Object.defineproperty的区别

Proxy优势：
可以直接监听对象 而非属性
可以直接监听数组的变化
有多达13种拦截方式：不限于 apply ownKeys、 deleteProperty等等 是 Object.defineproperty不具备的
返回的是一个新对象 可以只操作新的对象达到目的 而 Object.defineProperty只能遍历对象属性直接修改
作为新标准将受到浏览器厂商的重点持续的优化 也就是新标准的红利期
Object.defineProperty
兼容性好 IE9

22、 vue中如何重置data

使用Object.assign();vm.options.data可以获取到组件初始化状态下的data。
Object.assign(this.options.data())

23、template 作用

当一个不可见得包裹元素 减少不必要的DOM元素 整个结构会更加清晰

24、computed watch区别

1、computed是计算属性 更多用于计算
2、conputed 具有缓存性 在getter之后会进行缓存 足有在它依赖的属性值发生改变后 下一次computed 的值才会重新调用对应的getter计算
3、computed 适用于计算比较消耗性能的计算场景中
watch:
1、更多是类似于某种数据的监听回调 用于观察 props $emit或者本组件的值 当数据发生变化时 来执行回调进行后续操作
2、无缓存性 页面重新渲染时值不变也会执行

25、vue的diff算法

1、当数据发生变化时 直接渲染真实的DOM开销挺大的 所以 可以使diff 只去更新某一个小块
2、在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。
3、当数据发生改变时 set方法 会调用Dep.notify 通知所有订阅者，订阅者就会用patch给真实的DOM打补丁

26、不用Vuex会带来的问题
1、可维护性下降 想要修改数据 得维护好几处
2、可读性下降 因为一个组件里面的数据 你根本看不出来从哪里来的
3、增加了耦合性 大量的上传派发 会让耦合性大大的增加 本来Vue用Component就是为了降低耦合

27、虚拟DOM实现原理

1、虚拟DOM本质上是JavaScript对象 是对真实DOM的抽象
2、状态变更时 记录新树和旧树的差异
3、最后把差异更新到真正的DOM中

28、vue-cli工作

.vue文件 --> .js文件
ES6语法 --> ES5语法
Sass、Lass、Stylus--> CSS
对img 等静态资源的处理
热更新
定义环境变量 区分dev 和 production 模式