每个组件都存在自己的生命周期
1.虚拟dom
真实dom : 原生dom - - - 按照dom原生操作顺序实时更新界面(造成性能低)
虚拟dom : vNode 和dom对象一致 , 等待一系列操作完成之后 一次性更新界面
2.八大生命周期
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted
1.创建vue实例
2.组件的初始化 开始建立虚拟dom 编译事件等等
3.挂载组件
4.数据更新
5.组件是否销毁
<template>
<div id="compon">
{
{
msg }}
<button @click="changeMsg">修改值</button>
<button @click="changeCount">count++</button>
{
{
count }}
<button @click="isshow = !isshow">切换组件的挂载卸载</button>
<template v-if="isshow">
<child title="标题" content="我是内容"></child>
</template>
<child :title="title" :content="content" :num="price"></child>
</div>
</template>
<script> import child from "./components/child";
export default {
name: "compon",
components: {
child,
},
beforeCreate() {
console.log("初始化之前"