1. Vue 生命周期总结
四个阶段，八个钩子 -> 三个常用 created，mounted，beforeDestroy
2. 工程化开发 & 脚手架 Vue CLI
- 基本介绍：
Vue CLI 是 Vue 官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】 - 好处：
- 开箱即用，零配置
- 内置 babel 等工具
- 标准化
- 使用步骤：
- 全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g
- 查看 Vue 版本：vue --version
- 创建项目架子：vue create project-name（项目名-不能用中文）
- 跳转到该目录下：cd project-name
- 启动项目： yarn serve 或 npm run serve（找package.json）
3. 脚手架目录文件介绍 & 项目运行流程
- main.js 核心代码
- 导入 Vue：
import Vue from 'vue' - 导入 App.vue
import App from './App.vue' - 实例化 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 子传父
e
m
i
t
：子组件利用
∗
∗
emit： 子组件利用 **
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)
- 创建一个都能访问到的事件总线 (空 Vue 实例) → utils/EventBus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
- A 组件(接收方)，监听 Bus 实例的事件
created () {
Bus.$on('sendMsg', (msg) => {
this.msg = msg
})
}
- B 组件(发送方)，触发 Bus 实例的事件
Bus.$emit('sendMsg', '这是一个消息')
9. 非父子通信 (拓展) - provide & inject
provide & inject 作用：跨层级共享数据。
- 父组件 provide 提供数据
export default {
provide () {
return {
// 普通类型【非响应式】
color: this.color,
// 复杂类型【响应式】
userInfo: this.userInfo,
}
}
}
- 子/孙组件 inject 取值使用
export default {
inject: ['color','userInfo'],
created () {
console.log(this.color, this.userInfo)
}
}
