1.Vue生命周期

Vue生命周期就是一个Vue实例从 创建 到 销毁 的整个过程。生命周期四个阶段：

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

2. 挂载阶段：渲染模板。

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

4. 销毁阶段：销毁Vue实例。

2.Vue生命周期钩子

Vue生命周期有四个阶段，对应了八个钩子函数，如下图所示。这些函数会在生命周期当中自动运行，让开发者在特定阶段运行自己的代码。比如：

1. created：创建响应式数据之后，可以利用此函数请求服务端，拿到数据对响应式数据进行初始化。

2. monted：模板渲染完成后，可以利用此函数操作Dom，比如获取焦点。

3. before Destroy：销毁Vue实例之前，对一些资源进行释放。

3.工程化开发和脚手架

使用Vue进行开发有二种方式，第一种是核心包传统开发模式，这种开发模式不依赖任何构建工具，直接使用 html、css 和 js 文件，通过引入 Vue 的核心库来开发应用。这种方式适用于简单的应用或者学习场景。

在基于构建工具（例如：webpack）的环境中使用Vue进行开发，适合中大型项目。

• 工程化开发模式优点：提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等。

• 工程化开发模式问题：webpack配置起来不简单、雷同的基础配置、缺乏统一的标准。

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

3.1 脚手架VueCLI

Vue CLI 是Vue官方提供的一个全局命令工具，集成了webpack配置。可以帮助我们快速创建一个开发Vue项目的标准化基础架子。使用步骤如下：

1. 全局安装：yarn global add @vue/cli 或者 npm i @vue/cli -g

2. 查看vue/cli版本：vue --version

3. 创建项目架子：vue create project-name

4. 启动项目：yarn serve 或者 npm run serve（命令不固定，找package.json）

3.2 项目目录

下面是通过 Vue CLI 创建出的项目，各个目录及文件的含义如下图所示。

3.3 运行流程

4.组件化开发

一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。组件化开发能够提高项目的可维护性和可复用性。每个组件由三部分构成，分别是：

• template：结构

• script: js逻辑

• style： 样式 (可支持less，需要装包)

组件有普通组件、根组件二种类型。

4.1 根组件App.vue

整个应用最上层的组件，包裹所有普通小组件。

4.2 组件的注册使用

1.局部注册

局部注册只能在注册的组件内使用。使用步骤如下：

1. 创建.vue文件，编写三个组成部分。创建出的组件一般放在components文件夹下。

2. 在使用的组件内先导入再注册，

3. 在注册的组件中当成html标签使用即可。

// 导入需要注册的组件
import HmHeader from './components/HmHeader'export default {  //局部注册components: {HmHeader: HmHeaer,  //组件名: 组件对象。组件名和组件对象名字相同时，可简化为：HmHeader}
}

//在注册的组件中当成html标签使用即可
<组件名></组件名>

2.全局注册

全局注册的组件，在项目的任何组件中都能使用。使用步骤如下：

1. 创建.vue组件（三个组成部分）

2. main.js中进行全局注册

3. 在需要使用的组件中，当成html标签使用即可

//在main.js中进行注册
import HmButton from './components/HmButton'  //导入需要全局注册的组件Vue.component('HmButton', HmButton)  //进行注册

//在需要使用的组件中当成html标签使用即可
<组件名></组件名>

5.scoped解决样式冲突

写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。可以给组件中的 <style> 标签加上scoped 属性，让样式只作用于当前组件。

6.data必须是一个函数

一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。

7.组件通信

组件通信，就是指组件与组件之间的数据传递。组件之间的关系可分类父子关系和非父子关系，针对不同的组件关系，有不同的数据传递方案。

7.1 父向子通信

7.2 子向父通信

7.3 props校验

组件的 prop 可以指定验证要求，不符合要求，控制台就会有错误提示，能帮助开发者，快速发现错误。

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

如果只需要对类型校验，则可以采用简写形式。

props: {校验的属性名: 类型
}

7.4 非父子通信-event bus事件总线

非父子组件之间，进行简易消息传递，可以采用"event bus 事件总线 "。复杂场景下还是采用Vuex。非父子通信的步骤如下：

创建一个都能访问的事件总线，并进行导出。通常放到一个公共的js文件里。

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

A组件（接受方），监听Bus的 $on事件 

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

B组件（发送方），触发Bus的$emit事件

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

7.5 非父子通信-provide&inject

provide&inject用来跨层级共享数据。需要注意的是，provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。

父组件 provide 提供数据

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

子/孙组件 inject 获取数据

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

8.父子组件的双向数据绑定

8.1 通过v-model实现

v-model原理：v-model 本质上是一个语法糖。不同的表单元素， v-model在底层的处理机制是不一样的。例如应用在输入框上，就是 value 属性 和 input 事件的合并，。不过咱们只需要掌握应用在文本框上的原理即可。

<template><div id="app" ><input v-model="msg" type="text">//数据变，视图跟着变（:value的作用）。视图变，数据跟着变（@input的作用）。<input :value="msg" @input="msg = $event.target.value" type="text"></div>
</template>

我们可以将 v-model 拆解开来，实现父组件和子组件中数据的双向绑定。

//父组件
<template><div class="app"><BaseSelect:selectId="selectId"@changeCity="selectId = $event"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

//下拉框组件（子组件）。App.vue中的数据和此组件的数据实现了双向数据绑定
<template><div><select :value="selectId" @change="selectCity"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props: {selectId: String,},methods: {selectCity(e) {this.$emit('changeCity', e.target.value)},},
}
</script><style>
</style>

父组件中可以通过 v-model 的原理进一步简化代码

//父组件中，v-model可以拆解成:value和@input
<BaseSelect v-model="selectId"></BaseSelect>

//子组件
<select :value="value" @change="handleChange">...</select>
props: {value: String  //父组件如果用v-model传值，则props中只能使用value来接收数据
},
methods: {handleChange (e) {this.$emit('input', e.target.value)}
}

8.2 通过.sync修饰符

.sync修饰符也是用来实现父组件和子组件的双向数据绑定。相比于在父组件中使用v-model传值给子组件，子组件的props中必须使用value接收数据，.sync可以

//父组件
//简单写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//上述写法等价于下面
<BaseDialog :visible="isShow" @update:visible="isShow = $event" 
/>

//子组件
props: {visible: Boolean  
},this.$emit('update:visible', false)

10.ref和$refs

利用 ref 和 $refs 可以用于获取当前组件内的"dom 元素"或者"组件实例"，避免了普通 JavaScript 中通过全局 DOM 查找元素时可能产生的错误。

10.1 获取dom元素

1.在想要获取的标签上添加 ref 属性

<div ref="chartRef">我是渲染图表的容器</div>

2.通过 this.$refs.chartRef 获取目标标签

mounted () {console.log(this.$refs.chartRef)
}

10.2 获取组件实例

1.在父组件中给目标组件添加 ref 属性

<BaseForm ref="baseForm"></BaseForm>

2.通过 "this.$refs.目标组件名" 获取目标组件实例。获取到目标组件的实例之后，就可以通过这个实例获取组件中的数据和调用实例中的方法。

this.$refs.baseForm.组件方法()

11.异步更新（$nextTick）

DOM更新完成后，nextTick 里的函数体会自动异步执行。

//nextTick在方法中使用
this.$nextTick(() => {this.$refs.inp.focus()
})