详解Vue(3)——生命周期钩子（很重要）

最新推荐文章于 2024-03-04 08:48:43 发布

熬夜码农

最新推荐文章于 2024-03-04 08:48:43 发布

阅读量980

点赞数

文章标签： vue.js javascript 前端

原文链接：https://www.jianshu.com/p/4aca262162f2

版权

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

生命周期图示

beforeCreate()——>在实例创建之前
在beforeCreate之前，拿不到data里面的数据【使用频率较低】

created()——>创建实例时
最早只能在created拿到data数据，能修改data数据
娶不到最终渲染完的dom
不会修改到beforeUpdate和updated【使用频率很高】

beforeMount()——>在挂载之前
挂载：Vue实例和对应的dom标签进行绑定
编译模板已结束，可以访问data的数据
修改数据不会触发updated，beforeUpdate钩子函数

mounted()——>挂载之后的回调函数
真实的dom节点已经渲染到页面，可以操作渲染之后的dom
在vue.js底层实际有一个虚拟DOM，也就是，当mounted发现某一个属性发生变化之后，会将mounted里面的属性对一开始的属性进行覆盖，所以DOM最后渲染的时候，只会渲染mounted

beforeUpdate()——>更新之前会被调用
beforeUpdate和updated在create之前会被调用，不会被更新，但是在mounted和beforeMount执行，则会被更新

updated()——>更新之后会被调用

不能在updated里面改数据，如果在这该的话，就是一个死循环了！我不要测试在updated里面该数据！！

beforeDestroy()——>销毁之前
只有销毁某一个实例或者组件的时候就会被销毁
实例卸载之前会被调用，可以清理一些资源，防止内存泄露

destroyed()——>销毁之后

<body>
  <div id="app">
    {{username}}
  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        username: 'lishangkun'
      },
      beforeCreate() {
        console.log("beforeCreate:", this.username)
      },
      created() {
        //最早可以发送ajax数据请求
        console.log('created:', this.username)
        // this.username = "lishangkun";
      },
      // 
      beforeMount() {
        console.log('before mount')
        console.log(document.getElementById("app"))
        this.username = "糖大果";
      },
      mounted() {
        console.log('mounted:');
        console.log(document.getElementById("app"))
        console.log(this.$el)
        this.username = "唐大广";
        // setTimeout(() => {
        //   this.username = "lishangkun";
        // }, 1000)
        setTimeout(() => {
          vm.$destroy();
        }, 3000)
      },
      beforeUpdate() {
        console.log('beforeUPdate')
      },
      updated() {
        console.log('updated')
      },
      beforeDestroy() {
        console.log('beforeDestroy')
      },
      destroyed() {
        console.log('destroyed')
      }
    })
  </script>
</body>

结果

总结：

生命周期

熬夜码农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详解Vue(3)——生命周期钩子（很重要）

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM并在数据变化时更新 DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期图示beforeCreate()——>在实例创建之前在beforeCreate之前，拿不到data里面的数据【使用频率较低】created()——>创建实例时最早只能在created拿到data数据，能修改data数据...
复制链接

扫一扫