1. Vue 生命周期总结

四个阶段，八个钩子 -> 三个常用 created，mounted，beforeDestroy

2. 工程化开发 & 脚手架 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. 跳转到该目录下：cd project-name
  5. 启动项目： yarn serve 或 npm run serve（找package.json）

3. 脚手架目录文件介绍 & 项目运行流程

• main.js 核心代码
  1. 导入 Vue：
     import Vue from 'vue'
  2. 导入 App.vue
     import App from './App.vue'
  3. 实例化 Vue，将 App.vue 渲染到 index.html 容器中

     new Vue({
     render: h => h(App),
     }).$mount('#app')

4. App.vue 文件（根组件）

整个应用最上层的组件，包裹所有普通小组件。
一个根组件App.vue，包含的三个部分：
① template 结构 (只能有一个根节点)
② style 样式 (可以支持less，需要装包 less 和 less-loader )
（1） style标签，lang="less" 开启less功能
（2） 装包: 不要直接输入npm install less less-loader -g,这会直接按照最新版本，可能会报错，输入npm install less less-loader --save-dev
③ script 行为

5. 普通组件的注册使用：

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

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

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

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

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

6. 组件三大组成部分的注意点：

• 结构：有且只能一个根元素
• 样式：默认全局样式，加上 scoped 局部样式
• 逻辑：data是一个函数，保证数据独立。

  data () {
  return {
  count: 100
  }
  },

7. 组件通信

1. 两种组件关系分类 和 对应的组件通信方案

• 父子关系 → props & $emit
• 非父子关系 → provide & inject 或 eventbus
• 通用方案 → vuex

2. 父子通信方案的核心流程

• 2.1 父传子props：
  父组件通过 props 将数据传递给子组件
  ① 父中给子添加属性传值 ② 子props 接收 ③ 子组件使用
• 2.2 子传父$emit：
  子组件利用 $emit 通知父组件，进行修改更新
  ① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数

8. 什么是 prop

• Prop 定义：组件上 注册的一些 自定义属性
• Prop 作用：向子组件传递数据
• 特点：可以 传递 任意数量 的prop；可以 传递 任意类型 的prop

1. props 校验

• 作用：为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误
• 语法：① 类型校验；② 非空校验；③ 默认值；④ 自定义校验

//基础写法：类型校验
props: {
校验的属性名: 类型 // Number String Boolean Array Function Object类型做约束
},

//完整写法（类型、是否必填、默认值、自定义校验）
props: {
校验的属性名: {
type: 类型, // Number String Boolean ...
required: true, // 是否必填
default: 默认值, // 默认值
validator (value) {
// 自定义校验逻辑
return 是否通过校验
}
}
},

2. prop & data、单向数据流

共同点：都可以给组件提供数据。
区别：

• data 的数据是自己的 → 随便改
• prop 的数据是外部的 → 不能直接改，要遵循 单向数据流
  单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。
  口诀：谁的数据谁负责
  
  

8. 非父子通信 (拓展) – event bus 事件总线

作用：非父子组件之间，进行简易消息传递。(复杂场景 → Vuex)

1. 创建一个都能访问到的事件总线 (空 Vue 实例) → utils/EventBus.js

   import Vue from 'vue'
   const Bus = new Vue()
   export default Bus

2. A 组件(接收方)，监听 Bus 实例的事件

   created () {
   Bus.$on('sendMsg', (msg) => {
   this.msg = msg
   })
   }

3. B 组件(发送方)，触发 Bus 实例的事件

   Bus.$emit('sendMsg', '这是一个消息')

   9. 非父子通信 (拓展) – provide & inject

   provide & inject 作用：跨层级共享数据。

4. 父组件 provide 提供数据

   export default {
   provide () {
   return {
   // 普通类型【非响应式】
   color: this.color, 
   // 复杂类型【响应式】
   userInfo: this.userInfo,
   }
   }
   }

5. 子/孙组件 inject 取值使用

   export default {
   inject: ['color','userInfo'],
   created () {
   console.log(this.color, this.userInfo)
   }
   }