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 )
}
}