【Vue】组件及组件化, 组件生命周期

【组件介绍】

组件是一个独立的、可复用的 Vue 实例，也是一段独立的 UI 视图 ，代码上体现在是一个独立的 .vue 文件

类似乐高和积木一样，我们可以通过任意的乐高或积分进行组合，拼装成我们需要的成品。

【组件化思想】

这是一种代码的开发思想， 可以把一个大的页面拆成一系列小的组件， 分而治之，先拆分， 再组装，  提高代码复用性与维护性

【根组件 App.vue】

根组件是整个应用最上层的组件，包裹所有普通小组件， 如下列一个购物网站的布局：

【组件的使用】

1.创建

新建 .vue 文件，编写组件的 3 部分代码

注意： 每新建一个vue文件，内部会默认导出这个组件的对象

2.导入

哪里需要用组件， 就在哪里导入
3.注册

局部组件无需注册

全局组件需要在main.js中注册

(局部组件仅当前导入页面生效， 而全局组件对所有页面生效)

4.使用

把组件当成一个自定义标签使用即可

可以是单双标签，可以使用大驼峰或者烤串法

【组件的全局注册】

在min.js中注册， 在项目的任何组件中都能使用

语法：

演示：

【组件生命周期】

这是一个Vue实例(组件)从 创建 到 卸载 的整个过程

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 卸载

1. 创建阶段：创建响应式数据

2. 挂载阶段：渲染模板

3. 更新阶段：修改数据，更新视图

4. 卸载阶段：卸载组件

【组件生命周期钩子】

每个 Vue 组件实例的生命周期中， 会自动运行一些函数，这些函数被称为【Vue生命周期钩子】，简称钩子

这些函数较为特殊， 无需程序员调用， 而是由vue3内部机制自动调用

它们存在的意义是， 给予了程序员在特定时机添加自己代码的机会

比如：页面渲染完毕后， 让输入框立刻聚焦

【生命周期图示】

【图解】

【组合式API生命周期钩子】

Vue2钩子函数(选项式) VS Vue3 钩子·函数(组合式)

eg：