Vue知识汇集 -- 自用（欢迎指错，随时补充）

1、vue中的data为什么是一个函数而不是一个对象？

防止数据污染。 函数在每次使用的时候都会创建并返回一个新的实例，从而实现数据的独立。如果使用对象的话，会造成数据的共用从引发系列问题。

2、vue的生命周期钩子

• beforeCreated
• created
• beforeMount
• mounted
• beforeUpdated
• updated
• beforeDestroy
• destory
• activated
• deactivated
• beforeUnmount
• unmounted
• errorCaptured
• renderTracked
• renderTriggered

3、组件通信

（1、$ref: 父组件访问子组件

<compt ref="comp1" />
this.$refs.comp1 
// vue3中已经废除了使用this.$children 而建议使用 this.$ref

（2、$parent: 子组件访问父组件

this.$parent

（3、props: 父组件传递数据给子组件

父：
<compt :arr="[1,2,3]"  />
子：
...
props:{
	arr:{
		type:Array,
		default() {
			return []
		}
	}
}

（4、$emit: 子组件传递数据给父组件

子：
<template>
	<div>
		<button @click="change">{{title}}</button>
	</div>
</template>
export default {
	data() {
		title:'children'
	},
	methods:{
		change() {
			this.$emit('changetitle', '子传父')
			// （方法名， 参数）
		}
	}
}
父：
<compt @changetitle="changetitle" />
...
methods:{
	changetitle(query) {
		console.log('query:', query )
	}
}

（5、provide 和 inject ：父组件向下级组件传递数据和方法， 非响应式不常用

父：
...
provide:{
	name:"message",
	hide:() => {console.log(123)}
}
data() {return {}},

下级组件：
...
injece:['name', 'hide'],
created() {
	console.log(this.name); // message
	this.hide()  // 123
}
...

(6、eventBus： 新建一个vue实例 通过$on $emit $off 注册监听移除事件等， vue3中被移除 不建议使用

(7、vuex

4、$nextTick( () => {})   下次DOM更新之后

5、 $set 添加响应式property

this.$set(this.someobj, 'age', 18)

6、v-model 双向绑定

输入 <input v-model="msg1" /> 绑定：{{ msg1}}
输入 <input @input="msg2 = $event.target.value" :value="msg2" /> 绑定：{{ msg }}
...
data() {
	return {msg1:'', msg2:''}
}

7、Vue中class的应用

（1、动态绑定class 对象语法

<div :class="{ active: isActive,  'big-font': isBig}">
...
data() {
	return {
		isActive:true,
		isBig:true
	}
}

（2、直接用对象来表示

<div :class="classObj">
...
data() {
	return {
		isActive:true,
		isBig:true
	}
},
computed: {
	classObj() {
		return {
			active:this.isActive,
			'big-font':this.isBig
		}
	}
}

（3、内联样式

或直接绑定到一个对象上

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
...
data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

8、父子组件的生命周期顺序

parent created
children created
children mounted
parent mounted
parent beforeDestroy
children beforeDestroy
children destroyed
parent destroyed