2. 程式人生 > 其它 >14 vue之生命週期

14 vue之生命週期

阿新 • • 發佈：2022-02-12

1 鉤子函式

create

let vm = new Vue()

mount

掛載，把div掛載到元件中

update

let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改這個內容
    },
    methods: {
        handleClick() {
            console.log('我是根元件')
        }
    }
})

2 測試程式碼

<!DOCTYPE html>
<html lang="en">
<
 
head>
    <meta charset="UTF-8">
    <title>生命週期</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <child v-if="isShow"></child>
    <br>
    <button @click="terminate"
 
>刪除子元件</button>
    <button @click="reborn">顯示子元件</button>
</div>
</body>
<script>
    Vue.component('child', {
        template: `
            <div>
                {{name}}
                <button @click="name='Darker1'">更新資料1</button>
                <
 
button @click="name='Darker2'">更新資料2</button>
            </div>`,
        data() {
            return {
                name: 'Darker1',
            }
        },
        beforeCreate() {
            console.group('當前狀態：beforeCreate')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        created() {
            console.group('當前狀態：created')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        beforeMount() {
            console.group('當前狀態：beforeMount')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        mounted() {
            console.group('當前狀態：mounted')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
          //用的最多，向後端載入資料，建立定時器等
            console.log("頁面已被vue例項渲染, data, methods已更新");
            console.log('mounted')
            this.t = setInterval(function () {
                console.log('daada')
            }, 3000)
          
        },
        beforeUpdate() {
            console.group('當前狀態：beforeUpdate')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        updated() {
            console.group('當前狀態：updated')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        beforeDestroy() {
            console.group('當前狀態：beforeDestroy')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        destroyed() {
            console.group('當前狀態：destroyed')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
          //元件銷燬，清理定時器
            clearInterval(this.t)
            this.t = null
            console.log('destoryed')
        },


    })
    let vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        },
        methods: {
            terminate() {
                this.isShow = false
            },
            reborn() {
                this.isShow = true
            }
        }
    })
</script>
</html>

課堂案列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命週期</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <child v-if="isShow"></child>
    <hr>

    <button @click="terminate">刪除子元件</button>
    <button @click="reborn">顯示子元件</button>
</div>
</body>
<script>
    // 子元件   child  定義的元件，相當於一個標籤，但是他有自己的模板和樣式，事件
    Vue.component('child', {
        template: `
                <div>
                    <button @click="handleClick">點我，name更新</button>
                    <br>
                    {{name}}
                </div>

            `,

        data() {
            return {
                name: 'lqz',
                t:''
            }
        },
        methods:{
            handleClick(){
                this.name='彭于晏'
            }
    },
        beforeCreate() {
            console.group('當前狀態：beforeCreate')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        created() {
            console.group('當前狀態：created')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        beforeMount() {
            console.group('當前狀態：beforeMount')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        mounted() {
            console.group('當前狀態：mounted')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
          //用的最多，向後端載入資料，建立定時器等
            console.log("頁面已被vue例項渲染, data, methods已更新");
            console.log('mounted')
            // 定時器，每隔3s鍾，列印daada
            this.t = setInterval(function () {
                console.log('daada')
            }, 3000)

        },
        beforeUpdate() {
            console.group('當前狀態：beforeUpdate')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        updated() {
            console.group('當前狀態：updated')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        beforeDestroy() {
            console.group('當前狀態：beforeDestroy')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
        },
        destroyed() {
            console.group('當前狀態：destroyed')
            console.log('當前el狀態：', this.$el)
            console.log('當前data狀態：', this.$data)
            console.log('當前name狀態：', this.name)
          //元件銷燬，清理定時器
            clearInterval(this.t)
            this.t = null
            console.log('destoryed')
        },


    })



    let vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        },
        methods: {
            terminate() {
                this.isShow = false
            },
            reborn() {
                this.isShow = true
            }
        },

    })







</script>
</html>

相關推薦

14 vue之生命週期

1 鉤子函式 create let vm = new Vue() mount 掛載，把div掛載到元件中 update let vm = new Vue({ el: \'#box\',

Vue之生命週期函式詳解

目錄生命週期函式常用的生命週期的鉤子關於銷燬例項：總結生命週期函式 生命週期函式又叫：生命週期回撥函式，生命週期函式、 生命週期鉤子

Vue基礎之生命週期函式[殘缺版]！

Vue基礎之生命週期函式[殘缺版]！ 為什麼說是殘缺版呢？! 因為有一些周期函式我並沒有學到！所以是殘缺版！

vue原始碼解析之生命週期原理

生命週期 beforeCreate：最初呼叫觸發，data和events都不能用。可以在這裡處理整個系統載入的Loading；

【校招VIP】前端專題：前端vue考點之生命週期和雙向繫結

考點介紹： VUE是前端校招面試的重點，而生命週期和雙向繫結又是基礎考點之一，尤其在一二線公司，要求知道雙向繫結的原理，以及相關程式碼實現  

React之生命週期載入資料

import React, { Component } from \'react\'; import axios from \'axios\'; class Axios extends Component {

React之生命週期

/* https://reactjs.org/docs/react-component.html React生命週期函式： 元件載入之前，元件載入完成，以及元件更新資料，元件銷燬。

VUE的生命週期

- beforeCreat() 建立前 - 遍歷data物件下的屬性，返回getter/setter (this.$options.data) - created（）建立屬性已經繫結，屬性是可操作的。但Dom不存在。

vue學習 生命週期，元件

vue生命週期 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

Vue 的生命週期

Vue 例項從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化資料、編譯模板、掛載DOM-渲染、更新-渲染、解除安裝等一系列的過程，我們稱這是 Vue 的生命週期。

Vue元件生命週期執行原理解析

Vue例項有一個完整的生命週期，從開始建立、初始化資料、編譯模板、掛在DOM、渲染-更新-渲染、解除安裝等一系列過程，我們成為Vue 例項的生命週期，鉤子就是在某個階段給你一個做某些處理的機會。

【Vue】---生命週期

Vue 元件生命週期鉤子函式 生命週期函式，指的是元件的建立、更新、銷燬三個階段所觸發執行的函式。根據每個階段觸發的鉤子函式，我們可以相應的做一些操作，如獲取後端介面資料、監聽事件、執行事件、執行定時器、移

Vue過濾器,生命週期函式和vue-resource簡單介紹

一、過濾器 使用例子： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

Vue的生命週期鉤子

vue 元件的生命週期鉤子 從元件渲染—> 銷燬。不同的生命週期階段對應著元件內的不同的生命週期函式，在對應階段對應的函式會自動觸發。所有的生命週期都是同步函式。

詳解Angular元件之生命週期(二)

一、view鉤子 view鉤子有2個，ngAfterViewInit和ngAfterViewChecked鉤子。 1、實現ngAfterViewInit和ngAfterViewChecked鉤子時注意事項

面試題系列--【vue的生命週期】

vue的生命週期 vue例項從建立到銷燬的過程就是vue的生命週期 一共有八個生命週期

Vuejs學習筆記(一)-5.Vue的生命週期

Vue物件的生命週期：Vue的 生命週期 以上紅色部分的都是Vue例項建立過程中生命週期的回撥函式。有：beforeCreate,create,bemounted,mounted,destoryed等。以下程式碼是簡單用法：

react 父子元件之生命週期函式執行順序

react生命週期：掛載，更新，錯誤處理，解除安裝 　　掛載：constructor()、static getDerivedStateFromProps()、render()、componentDidMount()

淺談vue的生命週期

目錄1.什麼是生命週期?有什麼作用?2.第一次載入頁面會觸發哪幾個鉤子?3.簡述每個週期應用於哪個場景?4.created和mounted的區別5.在哪個生命週期獲取資料?總結1.什麼是生命週期?有什麼作用?

Vue3之生命週期函式

1. 概述 老話說的好：天生我材必有用，千金散盡還復來。 言歸正傳，今天我們來聊一下 VUE 的生命週期函式。