vue 实例生命周期

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_33724570

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/shuaihong/blog/1550522

2019独角兽企业重金招聘Python工程师标准>>>

vue 实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。我们常分为八个阶段：

钩子函数 - beforeCreate()

说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
vue实例生命周期参考1
vue实例生命周期参考2
使用场景：发送请求获取数据

钩子函数 - beforeMounted()

说明：在挂载开始之前被调用

钩子函数 - mounted()

说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()

说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

钩子函数 - updated()

说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeDestroy()

说明：实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

钩子函数 - destroyed()

说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ msg }}
    <h1 :title="msg"></h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      },
      methods:{
        fn() {
    
        }
      },
    
      // 没有 template 属性，vue会以el指定的HTML元素的outerHTML作为模版
      // 如果指定了 template 属性，此时，就会以 template属性的值内容做为模版展示
      // template: '<h1>{{ msg }}</h1>',
    
      // 钩子函数：
      // 注意:此时获取不到data或者methods中的数据
      beforeCreate(){
        console.warn('实例生命周期函数：beforeCreate');
        console.log(this.msg, this.fn);
        console.log('------------------------------------');
      },
      // 重点：
      // 使用场景：可以在这个方法中发送 ajax 请求，获取数据
      created() {
        console.warn('实例生命周期函数：created');
        console.log(this.msg);
        console.log(this.fn);
        console.log('------------------------------------');
      },
        // 实例挂载到页面之前
      beforeMount() {
        console.warn('实例生命周期函数：beforeMount');
        console.log(this.$el);
        console.log('------------------------------------');
      },
    
      // 重点：
      // 注意：如果要操作DOM，需要再找个方法中才可以！！！
      mounted() {
        console.warn('实例生命周期函数：mounted');
        console.log(this.$el);
        console.log('------------------------------------');
      },
      // 数据更新时
      // 1 数据已经变化
      // 2 DOM页面中的内容还没有被重新渲染
      beforeUpdate() {
        console.warn('实例生命周期函数：beforeUpdate');
        // console.log(this.msg);
        // console.log(this.$el);
    
        // 通过查看 $el中的文本内容，获取到的是：更行DOM之前的内容
        // console.log(this.$el.innerText);
        console.log('------------------------------------');
      },
      // 数据更新完毕
      updated() {
        console.warn('实例生命周期函数：updated');
        console.log(this.msg);
        console.log(this.$el);
    
        console.log(this.$el.innerText);
        console.log('------------------------------------');
      },
       // 实例或组件卸载之前
       beforeDestroy() {
        console.warn('实例生命周期函数：beforeDestory');
        // console.log(this.msg);
        // console.log(this.$el);
        // this.msg = '组件要被卸载了'
        console.log('------------------------------------');
      },
    
      // 组件已经卸载 
      destroyed() {
        console.warn('实例生命周期函数：destroyed');
        console.log('------------------------------------');
      }
    })
    //手动挂载实例方法
    .$mount('app');
    
    // 浏览器中销毁实例的方法：vm.$destroy()
  </script>
</body>
</html>

链接地址：https://cn.vuejs.org/v2/api/#选项-生命周期钩子

转载于:https://my.oschina.net/shuaihong/blog/1550522