【vue2学习打卡第三天】

一、Vue 生命周期 和 生命周期的四个阶段

Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

二、Vue 生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码
八个钩子函数：

阶段	内容
创建	beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时，组件的 data 和 methods 等属性还未初始化；created: 在实例创建完成后被调用。此时，组件的数据已经初始化，并且可以访问 data、methods 和 computed 属性，但尚未挂载到 DOM 中。
挂载	beforeMount: 在挂载开始之前被调用。此时，模板编译已完成，但尚未将组件挂载到 DOM 中。mounted: 在挂载完成后被调用。此时，组件已经被挂载到 DOM 中，可以进行 DOM 操作和访问外部库等操作。
更新	beforeUpdate: 在数据更新之前被调用。在该钩子函数中，你可以访问到更新之前的数据状态。updated: 在数据更新完成后被调用。在该钩子函数中，DOM 已经被重新渲染，可以执行依赖于 DOM 的操作。
销毁	beforeDestroy: 在实例销毁之前被调用。在该钩子函数中，你可以进行一些清理工作，比如取消定时器、解绑全局事件等。destroyed: 在实例销毁后被调用。此时，组件已经从 DOM 中移除，并且所有的事件监听器都已被移除。

三、工程化开发 & 脚手架 Vue CLI

开发 Vue 的两种方式：

1. 核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。
2. 工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。
   问题：
   ① webpack 配置不简单
   ② 雷同的基础配置
   ③ 缺乏统一标准

Vue CLI
基本介绍：
Vue CLI 是 Vue 官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】
好处：

1. 开箱即用，零配置
2. 内置 babel 等工具
3. 标准化

使用步骤：
1. 全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g
2. 查看 Vue 版本：vue --version
3. 创建项目架子：vue create project-name（项目名-不能用中文）
4. 启动项目： yarn serve 或 npm run serve（找package.json）

四、 脚手架目录文件介绍 & 项目运行流程

VUE-DEMO
│─node_modules 第三包文件夹
├─public 放html文件的地方
│ ├─favicon.ico 网站图标
│ └─index.html index.html 模板文件
├─src 源代码目录 → 以后写代码的文件夹
│ └─assets 静态资源目录 → 存放图片、字体等
│ └─components 组件目录 → 存放通用组件
│ └─App.vue App根组件 → 项目运行看到的内容就在这里编写
│ └─main.js 入口文件 → 打包或运行，第一个执行的文件
└─.gitignore git忽视文件
└─babel.config.js babel配置文件
└─jsconfig.json js配置文件
└─package.json 项目配置文件 → 包含项目名、版本号、scripts、依赖包等
└─README.md 项目说明文档
└─vue.config.js vue-cli配置文件
└─yarn.lock yarn锁文件，由yarn自动生成的，锁定安装版本

main.js核心代码：

// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
// 1. 导入 Vue 核心包
import Vue from 'vue'
// 2. 导入 App.vue 根组件
import App from './App.vue'
// 提示：当前处于什么环境 (生产环境 / 开发环境)
Vue.config.productionTip = false
// 3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
  render: h => h(App),
}).$mount('#app')

render: h => h(App),相当于：
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
el: '#app', 作用：和$mount('选择器')作用一致，用于指定Vue所管理容器

五、组件化开发 & 根组件

① 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
好处：便于维护，利于复用 → 提升开发效率。
组件分类：普通组件、根组件。
② 根组件：整个应用最上层的组件，包裹所有普通小组件。
App.vue 文件（单文件组件）的三个组成部分

1. 语法高亮插件：Vetur
2. 三部分组成：
   ◆ template：结构 （有且只能一个根元素）
   ◆ script: js逻辑
   ◆ style： 样式 (可支持less，需要装包)
3. 让组件支持 less
   （1） style标签，lang=“less” 开启less功能
   （2） 装包: yarn add less less-loader

<template>
  <div class="App">
    <div class="box" @click="fn"></div>
  </div>
</template>
<script>
// 导出的是当前组件的配置项
// 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
export default {
  created () {
    console.log('我是created')
  },
  methods: {
    fn () {
      alert('你好')
    }
  }
}
</script>
<style lang="less">
/* 让style支持less
   1. 给style加上 lang="less"
   2. 安装依赖包 less less-loader
      yarn add less less-loader -D (开发依赖)
*/
.App {
  width: 400px;
  height: 400px;
  background-color: pink;
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
}
</style>

六、普通组件的注册使用

组件注册的两种方式：

1. 局部注册：只能在注册的组件内使用
   ① 创建 .vue 文件 (三个组成部分)
   ② 在使用的组件内导入并注册
   components
   ├─MyHeader.vue
   ├─MyMain.vue
   ├─MyFooter.vue

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import MyHeader from './components/MyHeader'
export default {
// 局部注册
components: {
'组件名': 组件对象,
MyHeader
}
}

2. 全局注册：所有组件内都能使用
   ① 创建 .vue 文件 (三个组成部分)
   ② main.js 中进行全局注册
   components
   ├─MyButton.vue

// 导入需要全局注册的组件
import MyButton from './components/MyButton'
// 调用 Vue.component 进行全局注册
// Vue.component('组件名', 组件对象)
Vue.component('MyButton', MyButton)

使用：
◆ 当成 html 标签使用 <组件名></组件名>
注意:
◆ 组件名规范 → 大驼峰命名法，如：MyHeader
技巧：
◆ 一般都用局部注册，如果发现确实是通用组件，再定义到全局。