Vue实例之生命周期

最新推荐文章于 2022-08-02 20:57:15 发布

置顶

VIP文章鸿雁长飞光不度

最新推荐文章于 2022-08-02 20:57:15 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/C_Lemon_/article/details/105299802

版权

Vue的基本生命周期

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

在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

首先看代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>
<body>
  <div id="app">
    {
  {username}}
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        username: 'aaa'
      },
      beforeCreate() {
        console.log("beforeCreate:", this.username)
      },
      created() {
        console.log('created:', this.username)
      },
      beforeMount() {
        console.log('before mount')
        console.log(document.getElementById("a

最低0.47元/天解锁文章

鸿雁长飞光不度

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实例之生命周期

Vue的基本生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出...
复制链接

扫一扫