Vue.js学习记录-2-Vue实例生命周期钩子函数

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、Vue实例生命周期

1.Vue实例声明周期钩子函数(根据官方文档列举常用的八个钩子函数)

  1. beforeCreate：在实例初始化之后，数据观测和event/watcher事件配置之前被调用。

  2. created：在实例创建完成后立即被调用。挂载阶段还没开始，$el属性目前不可见。

  3. beforeMount：在挂载之前被调用：相关render函数首次被调用、

  4. mounted：el被新创建的vm.$el替换，并挂载到实例上后调用该钩子。

  5. beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。

  6. updated：由于数据更改导致虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

  7. beforeDestroy：Vue实例销毁之前调用。

  8. destroyed：Vue实例销毁后调用，调用后，Vue实例所指向的所有资源、监听器、子实例均会被销毁。

2.Vue生命周期钩子函数Demo源码

<!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>Vue生命周期</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- vue实例挂载点 -->
<div id="app"></div>
<script>
    // 声明周期函数就是vue实例在某一个时间点会自动执行的函数，无需放在methods中
    var vm = new Vue({
        el: "#app",
        template: "<div>{{test}}</div>",
        data: {
            test: "hello vue"
        },
        methods:{
        },
        // beforeCreate
        beforeCreate() {
            console.log("beforeCreate")
        },
        // created
        created() {
            console.log("created")
        },
        // beforeMount 
        beforeMount() {
            console.log("beforeMount")
            console.log(this.$el)
        },
        // mounted
        mounted() {
            console.log("mounted")
            console.log(this.$el)
        },
        // beforeUpdate
        beforeUpdate() {
            console.log("beforeUpdate")
        },
        // updated
        updated() {
            console.log("updated")
        },
        // beforeDestory
        beforeDestroy() {
            console.log("beforeDestory")
        },
        // destory
        destroyed() {
            console.log("destory")
        },
    })
</script>
</body>
</html>

3.Vue生命周期钩子函数测试

  1. 浏览器运行上述Demo，F12审查模式下查看控制台信息。对应生命周期1、2、3、4过程。

  2. 控制台操作Vue实例，进行挂载点元素数据的变更，查看控制台信息。对应生命周期5、6过程。

  3. 控制台操作Vue实例，进行实例销毁，查看控制台信息。对应生命周期7、8过程。

以上是 Vue.js学习记录-2-Vue实例生命周期钩子函数 的全部内容， 来源链接： utcz.com/z/374681.html

回到顶部