资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Vue.js之生命周期

Vue.js之生命周期

HitenDev / 3500人阅读

摘要：生命周期在实例初始化之后，数据观测和事件配置之前被调用。点击修改数据在中使用组件与在中使用组件是一样的效果在实例创建完成后被立即调用。

有时候，我们需要在实例创建过程中进行一些初始化的工作，以帮助我们完成项目中更复杂更丰富的需求开发，针对这样的需求，Vue提供给我们一系列的钩子函数。

vue生命周期

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../statics/vue.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">点击修改数据button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用组件与在body中使用组件是一样的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            });
    script>

body>
html>

效果:

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="static/vue.min.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">点击修改数据button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用组件与在body中使用组件是一样的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            created() {
                console.group("Created");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            }
        })
    script>

body>
html>

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../statics/vue.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">点击修改数据button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用组件与在body中使用组件是一样的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            created() {
                console.group("Created");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            beforeMount() {
                console.group("beforeMount");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            }
        })
    script>

body>
html>

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../statics/vue.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">点击修改数据button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用组件与在body中使用组件是一样的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            created() {
                console.group("Created");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            beforeMount() {
                console.group("beforeMount");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            mounted() {
                console.group("mounted");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
        })
    script>

body>
html>

beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../statics/vue.js">script>
head>
<body>

    <div id="app">
        {{ name }}
        <button @click="myClick">点击修改数据button>
    div>

    <script>

        new Vue({
            el: "#app",
            // 在template中使用组件与在body中使用组件是一样的
            // template: ``,
            data: {
                name: "Alex"
            },
            methods: {
                init: function () {
                    console.log(this.name);
                },
                myClick: function () {
                    this.name = "Pizza";
                }
            },
            beforeCreate() {
                console.group("beforeCreate");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            created() {
                console.group("Created");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            beforeMount() {
                console.group("beforeMount");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            mounted() {
                console.group("mounted");
                console.log("el: ", this.$el);
                console.log("data: ", this.$data);
                console.log("name: ", this.name);
                console.log("init: ", this.init);
                console.log("innerHTML: ", document.getElementById("app").innerHTML);
            },
            beforeUpdate() {
                console.group("beforeUpdate");
                console.log("el: ", this.$el);
                console.log("data: ", 
                 

                                                                                                                    
                         专线服务
                                             
                         idc机房托管
                                                                                                                                                 
                                      
                     
                    
                                                                                               生命周期
                                                                                                           软件生命周期
                                                                                                           生命周期理论
                                                                                                           页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1537.html

相关文章

  • # vue.js 之 对vue.js基础理解

    摘要：之对基础理解构造器是一个构造函数，编程中称之为构造器每一个都是一个构造函数的实例，这个过程叫做实例化构造函数需要将其实例化后才会启用构造器要求实例化时需要传入一个选项对象组件其实都是被扩展的实例。 vue.js 之 对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数，编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫...

    Rainie 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

  • Vue 实例中的生命周期钩子详解

    摘要：实例在文档中经常会使用这个变量名表示实例，在实例化时，需要传入一个选项对象，它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程，就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程...

    gityuan 评论0 收藏0

发表评论

登陆后可评论

0条评论

HitenDev

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<