抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

第七课主要讲的是Vue的生命周期函数

vue3生命周期钩子函数

每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
比如mounted钩子可以用来在一个实例被创建之后执行代码:

1
2
3
4
5
6
7
8
9
10
Vue.createApp({
data() {
return {
message: 'HelloWorld'
}
},
mounted() {
alert('mounted')
},
})

生命周期图示

生命周期图示

  • beforeCreate( ) :在实例生成之前会自动执行的函数
  • created( ) : 在实例生成之后会自动执行的函数
  • beforeMount( ) : 在模板渲染完成之前执行的函数
  • mounted( ) : 在模板渲染完成之后执行的函数
    我们也写了对应的方法,通过这些代码和查看效果,可以很好的理解生命周期函数执行的先后顺序。代码如下。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    beforeCreate() {
    console.log('beforeCreate')
    },
    created() {
    console.log('created')
    },
    beforeMount() {
    console.log('beforeMount')
    },
    mounted() {
    console.log('mounted')
    },
    写完这些代码后,可以到浏览器控制台中查看一下效果。

评论