一、生命周期：
- 大概意思：一个组件从开始到最后消亡所经历的各种状态
- beforeCreate： 初始化实例
- created：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据（使用场景：发送请求获取数据）
- beforeMounted：在挂载开始之前被调用（请求发送回来还未挂载）
- mounted：vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
- beforeUpdated：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
- updated：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用（比如清除定时器等）
- destroyed：Vue 实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
二、父子组件之间的传值：
父组件：father.vue
<template>
<div class="father">
<div>{{msg}}</div>
<son :bool='false'></son>
</div>
</template>
<script>
import son from './component/son';
export default{
components:{
//注入组件
son
}
data(){
msg:"hello"
}
}
</script>
子组件：son.vue
<template>
<div class="son">
<div>{{msg}}</div>
<div v-if="bool">是否显示</div>
</div>
</template>
<script>
export default{
data(){
msg:"我是子组件"
}
props: {
bool: {
type: Boolean,
default: true
}
}
}
</script>
父组件：father.vue
<template>
<div class="father">
<div>{{msg}}</div>
<div>{{count}}</div>
<son @listenToChildEvent="fun"></son>
</div>
</template>
<script>
import son from './component/son';
export default{
components:{
//注入组件
son
}
data(){
msg:"hello" ,
count:''
},
methods:{
fun(res){
this.count = res
}
}
}
</script>
子组件：son.vue
<template>
<div class="son">
<div>{{msg}}</div>
<div @click="msgToFa">向父组件传值</div>
</div>
</template>
<script>
export default{
data(){
msg:"我是子组件"
},
methods:{
msgToFa(){
this.$emit("listenToChildEvent","1")
}
}
}
</script>
三、computed和watch的区别和联系：参考地址
- 应用方面，watch比较适合对状态的监控，比如监控页面一个变量的值改变，需要进行什么操作。而computed适合简单计算并返回结果，结果随着内部变量改变而改变。
- 调用方面，watch适合比较耗时的操作，比如网络异步请求，一个变量改变触发网络请求。
- watch可以看做一个onchange事件，computed可以看做几个变量的组合体。
四、data的数据改变了，视图会更新吗？
