前言

每一个后缀.vue的文件都可以称之为组件，组件的优势那就是复用，我们在components去新建组件，v3的组件不需要注册，直接在dom使用即可，平常写标签的方式即可

 <HelloWord></HelloWord>

Vue2的beforeCreate,created,在setup语法糖是没有的，setup就直接代替了

触发顺序

setup 先触发
开始创建之前 onBeforeMount
创建完成之后 onMounted
更新前 onBeforeUpdate
更新后 onUpdated
卸载之前 onBeforeUnmount
卸载之后 onUnmount


console.log('setup');

onBeforeMount(() => {
  console.log('创建前'); 
})
onMounted(() => {
  console.log('创建后');
})
onBeforeUpdate(() => {
  console.log('更新前'); 
})
onUpdated(() => {
  console.log('更新后'); 
})
onBeforeUnmount(() => {
  console.log('卸载前'); 
})
onUnmounted(() => {
  console.log('卸载后');

先触发的setup，然后就是创建前，创建后

触发更新前，更新后，修改视图的数据


<button @click="change">修改</button>

let change = () => {
  name.value = '修改了'
}

触发卸载前后，注意一点在组件上定义v-show，是不会触发创建和销毁的

总结

onBeforeMount和onMounted是有区别，在onBeforeMount中是读取不到dom的，到onMounted才可以
onBeforeUpdate和onUpdated也是有区别的，当修改某个值的时候，更新前获取的是之前的值，更新后才获取被修改的值，说明更新前dom是没有更新的，可以利用这个机制做一些卸载的操作

V3的生命周期

前言

触发顺序

总结