Vue组件，组件通信，生命周期

组件系统

1. 组件化的出现？

   • 前端本身就是从后端分离出来 -> 量大【 项目任务重 】 -> 团队开发 -> 项目合【 难点 】 -> 如果分离出去任务是一个独立的整体，那么引用的时候就不会出现太大的问题 -> 组件【 独立的整体 】

2. 组件 - Component

   • 其实是一个html、css、js等的一个聚合体

3. Vue是如何定义组件的？、

   • Vue.extend() -> 帮助Vue扩展了组件的概念

4. Vue组件的结构

   • 树形结构
   • 根组件： 使用 new Vue() 来充当， 用来表示

5. 组件的使用形式

   • 标签化: 组件使用类似标签的形式
   • 组件既可以是单标签，也可以双标签

6. 组件命名形式

   • 大驼峰形式
   • swiper-item

7. 思考： 组件标签化的解析？

   • 解决方案： 组件的注册

8. 全局注册

9. 局部注册

组件通信

1. 父子组件通信

   • 使用props实现

2. 子父组件通信

   • 使用自定义事件 / $emit 实现

3. 非父子组件通信

   • ref链实现
   • bus事件总线实现

4. 路由通信 - vue高级

5. 多组件状态共享 - vue高级

什么是jsx?

jsx其实就是帮助我们来简化vdom结构写法
jsx -> javascript + xml jsx是对js语法的扩展
jsx就是可以让我们在js中书写xml

为什么vdom性能高？

• 操作数据远比操作DOM要快的多

• 如果我们用数据来模拟DOM，然后我们操作这个数据，那么是不是就会比操作dom，快的多呢

• 这个模拟DOM的数据我们就称之为虚拟DOM

生命周期

1.初始阶段

beforeCreate () {}
* 1. 实例被创建之前的函数
* 2. 为实例的创建以及实例的事件初始化和整个生命周期做一个准备
* 3. 数据是无法获得的
* 4. 真实DOM获取不到

created () {}
* 1. 表示组件创建结束
* 2. 初始化数据【 给data的数据做数据劫持，实现深入响应式原理 】
* 3. 可以得到数据
* 4. 可以进行数据修改

beforeMount () {}
* 1. 表示组件挂载前执行
* 2. 任务
* a. 判断实例或是组件是否有el选项，如果有，那么继续判断是否有template选项，如果没有，那么我们需要在实例创建结束之后通过 $mount 手动进行挂载
* b. 判断是否有template选项
* 有, 那么我们使用render函数来编译 template中的jsx结构 ， 同时也会解析jsx结构中的数据
* 没有，使用outerHTML来讲这个组件编译
* 3. 这个函数前有了 Virtual DOM
* 4. 可以获得数据
* 5. 可以进行数据修改

mounted () {}
* 1. 表示组件挂载结束
* 2. 也就意味着 真实DOM 代替了 VDOM
* 3. 可以获得数据
* 4. 可以进行数据修改

2.更新阶段

beforeUpdate () {}
* 1. 监听 data 中数据是否改变，如果改变那么久执行更新阶段

updated () {}
* 1. 表示更新结束
* 2. 任务
* 重新生成VDOM,并通过diff算法比对新旧VDOM，获得patch补丁对象，然后渲染成真实DOM
* 3. 真实DOM操作 -> 第三方类似实例化

3.销毁阶段

beforeDestroy () {}

destroyed () {}