vue入门整理（生命周期、Data、计算属性和侦听器、事件处理、组件）

系列文章目录

---

前言

vue基础知识整理归纳

---

一、生命周期

beforeCreate(创建前)
created(创建后)
beforeMount(挂载前)
mounted(挂载后)
beforeUpdate(更新前)
updated(更新后)
beforeDestory(销毁前)
destoryed（销毁后）

vue第一次页面加载会触发beforeCreate(创建前)、creates(创建后)、beforeMount(挂载前)、mounted(挂载后)四个钩子函数。
DOM渲染在mounted这个周期已经渲染完成

vue3与vue2生命周期比较

beforeDestory改名为beforeUnmount
destoryed改名为unmount

同时，vue3提供了composition形式的生命周期钩子，与vue2的对比关系如下：
beforeMount====>onBeforeMount
mounted====>onMounted
beforeUpdate====>onBeforeUpdate
updated====>onUpdated
beforeUnmount====> onBeforeUnmount
unmounted====>onUnmounted
errorCaptured====>onErrorCaptured
renderTracked====>onRenderTracked
renderTriggered====>onRenderTriggered
activated====>onActivated
deactivated====>onDeactivated

二、Data

组件的data选项是一个函数，Vue会在创建新组建实例的过程中调用此函数。它应该返回一个对象，然后Vue会通过相应性系统将其包裹起来，并以$date的形式存储在组件实例中。为方便起见，该对象的任何顶级property也会直接通过组件实例暴露出来。

三、计算属性和侦听器

计算属性(computed)是监听多个属性对一个属性的影响
侦听器(watch)是侦听一个属性变化

四、事件处理

监听事件

v-on（@）监听DOM事件

事件修饰符

vue为v-on提供了事件修饰符来处理DOM事件细节,如：
event.preventDefault()或
event.stopPropagation()

vue通过.表示的指令后缀来调用修饰符
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.selt - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

按键修饰符

vue允许为v-on在监听键盘事件时添加按键修饰符：
@keyup.13 - 只有在keyCode是13时调用函数
记住所有的keyCode比较困难，所以vue为常用的按钮提供了别名
@keyup.enter 键值为13的别名为enter。效果同上

.enter
.tab
.delete(捕获删除和退格键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

五、vue组件

1.全局注册

注册一个全局组件语法如下:

Vue.component(tagName, options)
<tagName></tagName>   // 引用

2.局部注册

在components文件中自定义vue组件,，然后引入

3.组件通信方式

1).props(父向子)、$emit（子向父）

2)eventBus事件总线（$emit、$on）

eventBus事件总线适用于父子组件、非父子组件之间的通信
（1）创建事件中心管理组件之间的通信

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

(2)发送事件，例如有兄弟组件firstCom和secondCom
firstCom中:

import EventBus from '.event-bus.js'
export default{
	data(){
		num: 0
	},
	methods: {
		add(){
			EventBus.$emit('addition', {
				num: this.num
			})
		}
	}
}

(3)接收事件
在secondCom组件中接收事件：

import EventBus from '.event-bus.js'
export default{
	data(){
		count: 0
	},
	mounted() {
		EventBus.$on('addition', param => {
			this.count = param.num
		})
	}
}

3)依赖注入(provide / inject)

这种方式适用与父子、祖孙等多层级嵌套，可以避免一层层传递数据
provide和inject是和data、methods同级的，并且provide书写形式和data一样
注意：依赖注入所提供的属性是非相应式的
父组件中：

provide(){
	return {
		num: this.num
	}
}

子组件中:

inject: ['num']

4.插槽（slot）

1)匿名插槽

子组件

// 子组件B
<slot ></slot>

父组件

// 父组件A
<B>验证插槽</B>

2）具名插槽

// 子组件B
<slot name="head"></slot>
<slot></slot>
<slot name="footer"></slot>

父组件

// 父组件A
<B>
	<template v-slot:head>
		<div>具名插槽head内容</div>
	</template>
	<div>匿名插槽内容</div>
	<template v-slot:footer>
		<div>具名插槽footer内容</div>
	</template>
</B>

v-slot：可以用#代替,例如：#head、#footer

3)作用域插槽

提供父组件直接调用子组件数据的途径
子组件

//B组件
<slot :obj="obj"></slot>

父组件

// A组件
<template slot-scope="data">
	{{data.obj}}
</template>
//v-slot指令自Vue2.6.0引入，可以更好的支持slot和slot-scoped的attribute的api替代方案。自vue3后只支持v-slot
<template v-slot="data">
	{{data.obj}}
</template>