三十七个常见Vue面试题，背就完事了三

十七、谈谈对组件的理解

• 组件化开发能大幅提高应用开发效率、测试性、复用性
• 常用的组件化技术：属性、自定义事件、插槽
• 降低更新范围，值重新渲染变化的组件
• 高内聚、低耦合、单向数据流

十八、请描述组件的渲染流程
产生组件虚拟节点 -> 创建组件的真实节点 -> 插入到页面

十九、请描述组件的更新流程
属性更新会触发patchVnode方法，组件的虚拟节点会调用prepatch钩子，然后更新属性，更新组件。

二十、异步组件原理
先渲染异步占位符节点 -> 组件加载完毕后调用forceUpdate强制更新。
二十一、函数组件的优势和原理

• 函数式组件的特性：无状态、无生命周期、无this。因此性能会高一点。

正常的一个组件是一个类继承了Vue。
函数式组件，就是一个普通的函数。
二十二、组件的传值方式有哪些？

1. props和emit:父组件向子组件传递数据，通过prop传递。子组件传递数据给父组件是通过emit: 父组件向子组件传递数据，通过prop传递。子组件传递数据给父组件是通过emit:父组件向子组件传递数据，通过prop传递。子组件传递数据给父组件是通过emit事件
2. parent,parent,parent,children获取当前组件的父组件和当前组件的子组件
3. attrs和attrs和attrs和listeners 。
4. 父组件通过provide提供，子组件通过inject注入变量
5. $ref获取实例
6. eventBus平级组件数据传递
7. Vuex

二十三、$attrs是为了解决什么问题出现的？
主要作用是为了实现批量传递数据。
provide/inject更适合应用在插件中，主要实现跨级数据传递。
二十四、v-for和v-if哪个优先级更高？
首先，v-for和v-if 不能在同一个标签中使用。
先处理v-for，再处理v-if。
如果同时遇到的时候，应该考虑先用计算属性处理数据，在进行v-for，可以减少循环次数。
二十五、v-mode是如何实现的？
在组件上用的v-model，是model和callback

在普通元素上用v-model，会生成指令，还可能因为不同的元素：

• 生成value和input
• 生成change和radio
• 生成change和checked

指令在什么时候会调用？

源码：

二十六、Vue的普通Slot以及作用域Slot的区别
普通插槽
普通插槽是渲染后做替换的工作。父组件渲染完毕后，替换子组件的内容。

在模板编译的时候，处理组件中的子节点和slot标签

在创建元素的时候，用_t()方法方法来替换_v()的内容。

作用域插槽
作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。

作用域插槽的编译结果：

 双向数据绑定的原理

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数 据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几 个步骤：

1.需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会 触发 setter，那么就能监听到了数据变化

2.compile 解析模板指令，将模板中的变量替换成数据，然后初始化 渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数 据的订阅者，一旦数据有变动，收到通知，更新视图

3.Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做 的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ② 自身必须有一个 update()方法 ③待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则成功 成身退。

4.MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input)-> 数据 model 变更的双向绑定效果。