组件化.md

[TOC]

谈一谈对Vue组件化的理解？

首先来看看Vue中组件是怎么定义的？

• html定义

Vue.component("Com",{
    template: `<div>component</div>`
})

• 单文件组件定义

<template>
	<div>
        component
    </div>
</template>
<script>

</script>

<style>

</style>

Vue-loader会编译template为render函数，最终导出的依然是组件配置对象

组件化的优点

src\core\instance\lifecycle.js 是mountComponent

组件、Watcher、渲染函数和更新函数之间的关系

组件化的实现

• 构造函数，src\core\instance\events.js
• 实例化和挂载，

src\core\vdom\patch.js -> createElm, createComponent

src\core\vdom\create-component.js

回答的总体思路：

组件化的定义、优点、使用场景和注意事项等方面展开陈述，同时要强调Vue组件化的特点。

源码入口文件：src\core\global-api\assets.js

面试题

• 请谈谈你对组件化的理解

1. 组件是独立可复用的代码单元。在我看来，它是Vue核心特征之一，它可以使我们使用小型的组件来构建大型工程。
2. 组件分类按使用来分有：页面组件、业务组件、通用组件
3. 组件化开发可以提高应用开发效率，可对单一组件进行debug，比如说我和我的同学同时开发一个页面，如果不用组件化的思想，那我们写每一行代码之前都需要考虑另一个人有没有写这一行代码，毫无疑问的这会极大地拉低开发效率。
4. 合理划分组件，有助于提高应用性能。比如说在渲染一个大表格的时候，数据发生变化的通常是表格内容，而表格外面包裹的展示内容是不需要变化的，此时我们把表格抽离成为组件，可以在渲染的时候减少虚拟Dom的变化。
5. Vue的组件是基于配置的，我们写的组件通常是组件配置，在打包的时候，其实会被切割的，比如说template最终会先调用render函数获取AST.
6. Vue中常用的组件化技术有： 属性prop,自定义事件，插槽等，他们主要用于组件通信，扩展等
7. 组件是高内聚低耦合的、遵循单向数据流原则，即父组件传给子组件数据，而子组件需要更改数据的时候，不是直接修改数据，而是通过事件派发的方式通知父组件自行更改。
8. 请问面试官，我这样理解有什么问题吗？