本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
大家好，我是除了开发，什么都想试试的布布。今天继续创作vue基础知识笔记系列，废话不多说（掘金社区会发小消息吗？）。马上开启第二篇吧，但是但是，咱第一篇写的也还行，移步去看看，不要忘记点个赞呀！
生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等，称为Vue实例的生命周期。在Vue实例的生命周期过程中会运行一些叫做生命周期钩子的函数，这给用户在不同阶段添加自己代码的机会。
-
生命周期三个阶段：初始化、更新、销毁
-
初始化：beforeCreate、created、beforeMount、mounted
-
更新：beforeUpdate、updated
-
销毁：beforeDestroy、destroyed
-
使用场景分析
beforeCreate(){} : 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
created(){} : 组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount(){} : 未执行渲染、更新，dom未创建
mounted(){} : 初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate(){} : 更新前，可用于获取更新前各种状态
updated(){} : 更新后，所有状态已是最新
beforeDestroy(){} : 销毁前，可用于一些定时器或订阅的取消
destroyed(){} : 组件已销毁，可用于一些定时器或订阅的取消
组件
组件是可复用的 Vue 实例，带有一个名字，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
组件注册、使用及数据传递
Vue.component(name, options)可用于注册组件。
<!-- 自定义组件 -->
<ok-list :list="list"></ok-list>
<script>
// 注册ok-list组件
Vue.component('ok-list', {
data() {
}
//自定义事件及其监听
//当子组件需要和父级组件进行通信，可以派发并监听自定义事件。
},
props: {
list: { // 父组件传递的值
type: Array,
default: []
},
},
template: `
<div></div>
`,
})
const app = new Vue({
el: '#app',
data: {
}
})
</script>
自定义事件及其监听
当子组件需要和父级组件进行通信，可以派发并监听自定义事件。
<!-- 监听组件事件 -->
<ok-add @add-ok="addOk"></ok-add>
<script>
// 组件注册
Vue.component('add-ok', {
data() {
return {
okkk: '', // 将okkk从父组件提取到ok-add维护
}
},
template: `
<div>
<!-- 表单输入绑定 -->
<input v-model="okkk" @keydown.enter="addOk"/>
<!-- 事件处理 -->
<button v-on:click="addOk">新增</button>
</div>
`,
methods: {
addCourse() {
// 发送自定义事件通知父组件
// 注意事件名称定义时不要有大写字母出现
this.$emit('add-ok', this.okk)
this.okk = ''
}
},
})
const app = new Vue({
methods: {
// 回调函数接收事件参数
addCourse(ok) {
this.list.push(ok);
}
},
}
</script>
组件实现v-model
自定义组件支持v-model需要实现内部input的:value和@input,v-model默认转换是:value和@input，如果想要修改这个行为，可以通过定义model选项
Vue.component('ok-add', {
model: {
prop: 'value',
event: 'change'
}
})
通过插槽分发内容
通过使用vue提供的<slot>元素可以给组件传递内容,如果存在多个独立内容要分发，可以使用具名插槽v-slot:name。
总结
Vue组件化的理解
组件化是Vue的精髓，Vue应用就是由一个个组件构成的。
定义：
- 组件是可复用的
Vue 实例，准确讲它们是VueComponent的实例，继承自Vue。
优点：
- 从上面案例可以看出组件化可以
增加代码的复用性、可维护性和可测试性。
使用场景：
- 什么时候使用组件？以下分类可作为参考：
- 通用组件：实现最基本的功能，具有通用性、复用性，例如按钮组件、输入框组件、布局组件等。
- 业务组件：可以完成具体业务，具有一定的复用性，例如登录组件、轮播图组件。
- 页面组件：组织应用各部分独立内容，需要时在不同页面组件间切换，例如列表页、详情页组件
如何使用组件
- 定义：Vue.component()，components选项，单个文件
- 分类：有状态组件，functional（无状态组件），abstract（抽象组件）
- 通信：
props，$emit()/$on()，provide/inject，$children/$parent/$root/$attrs/$listeners - 内容分发：
<slot>，<template>，v-slot - 使用及优化：is，keep-alive，异步组件
组件的本质
vue中的组件经历如下过程
组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM
所以组件的本质是产生虚拟DOM
