今天的码农女孩做了关于vue生命周期的笔记和简答

生命周期
生命周期的过程分为：创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后
beforeCreate:组件刚被创建的时候调用，在此所有变量和函数都未初始化
created:在组件创建完成后调用，此时变量和函数都已初始化完毕
beforeMount:在组件挂载前调用，此时el可以寻找到标签元素
mounted：在组件挂载后前调用，此时可以操作dom元素
beforeUpdate：在组件更新前调用，此时可以拿到新旧的虚拟dom做对比
update：在组件更新后调用，此时也可以操作dom，但是拿的是新的dom值
beforeDestory:在组件销毁前调用，用来解除组件的数据，例如销毁轮播图，变量，函数等
destoryed:在组件销毁后调用，此时组件已被销毁，无法调用组件了
例如：
       new Vue({
            el:"#app",
            data:{
                str:"hello",
            },
            methods:{
                fun:function(){
                    console.log("函数被执行了")
                }
            },
            beforeCreate:function(){
                console.log("------创建前-------")
                console.log(this.$el)
                console.log(this.str)
                console.log(this.fun)
            },
            created:function(){
                console.log("------创建后-------")
            },
            beforeMount:function(){
                console.log("------挂载前-------")
            },
            mounted:function(){
                console.log("------挂载后-------")
            },
            beforeUpdate:function(){
                console.log("------更新前-------")
            },
            updated:function(){
                console.log("------更新后-------")
            },
            beforeDestory:function(){
                console.log("------销毁前-------")
            },
            destoryed:function(){
                console.log("------销毁后-------")
            }
        })

vue3.0的生命周期

1.createApp(App) 实例化一个vue对象，创建应用

2.init Event & Lifecycle 执行一些初始化和生命周期相关操作

3.init injections & reactivity 初始化注入和校验

4.setup 组件创建时调用，属性和函数创建了，dom元素没有

5.has "template" option?判断模块是否存在

6.onBeforeMount 挂载前，属性和函数创建了，el没有挂载

7.create APP.$el and replace el 给vue对象添加el成员，替换挂载的dom元素

8.onMounted 挂载后，属性，函数，el都有数据了

9.onBeforeUpdate更新前，可以拿到更新的新旧数据，没有渲染到页面

10.onUpdate更新后，此时数据已经渲染到页面上，可以做后期处理

11.onBeforeUnmount销毁前，让数据和函数也跟着销毁

12.onUnmount销毁后，此时组件已经销毁，跟着的子组件和数据也都不存在，可以做后续处理

对比：

createAPP(App)

beforecreate，created->setup

beforeMount->onBeforeMount

mounted->onMounted

beforeUpdate->onBeforeUpdate

update->onUpdated

beforeDestory->onBeforeUnmount

destoried->onUnmount

简答：vue2.0和vue3.0的区别？

1.vue2使用object.defineProperty进行数据劫持，结合发布订阅者模式实现；vue3.0使用ES6的proxy的代理器，用ref或者reactive将数据转化为响应式数据

2.vue2使用选项类型，数据放在data里，函数放在methods里；vue3使用合成型，数据和函数都放在setup里

3.vue2和vue3的生命周期函数不同

4.vue2父组件传给子组件的值，console.log('props',this.变量)获取；vue3 setup(props,context){console.log('props',props)}

5.vue2子组件传给父组件的值，this.$emit()调用父组件；

   vue3 setup(props,context){context.$emit()}调用父组件

6.vue3相比vue2,更快，更小，更易维护，更易于原生