2. 程式人生 > 其它 >vue學習08——生命週期函式、setup函式

vue學習08——生命週期函式、setup函式

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

vue中所有的鉤子函式：

beforeCreate（建立前）
created（建立後）
beforeMount（載入前）
mounted（載入後）
beforeUpdate（更新前）
updated（更新後）
beforeDestroy（銷燬前）

下面是完整程式碼

<!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="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>
 
    <body>
        <div id="app">
            <input v-model="message"></input>
            <h1>{{message1}}</h1>
        </div>
    </body>
    <script>
        var
 
 vm = new Vue({/*建立vue物件*/
            el: '#app',/****掛載目標****/
            data: {/****資料物件****/
                message: 'Hello World!'
            },
            computed:{/****實現某一屬性的實時計算****/
                message1:function(){
                    return this.message.split("").reverse().join("");
                }
            },
            watched:{
 
/****檢測某一屬性值的變化****/
 
            },
            methods:{/****元件內部的方法****/
 
            },
 
            beforeCreate: function() {
                console.group('------beforeCreate建立前狀態------');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this
 
.$data); //undefined 
                console.log("%c%s", "color:red", "message: " + this.message)//undefined
            },
            /**
             * 1.在beforeCreate和created鉤子之間，程式開始監控Data物件資料的變化及vue內部的初始化事件
             * 
             * */
            created: function() {
                console.group('------created建立完畢狀態------');
                console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
            },
            /**
             * 2.在created和beforeMount之間，判斷是否有el選項，若有則繼續編譯，無，則暫停生命週期；
             * 然後程式會判斷是否有templete引數選項，若有，則將其作為模板編譯成render函式。若無，則將外部html作為模板編譯（template優先順序比外部html高）
             * 
             * */
            beforeMount: function() {
                console.group('------beforeMount掛載前狀態------');
                console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
            },
            /**
             * 3.在beforeMount和mounted之間，程式將上一步編輯好的html內容替換el屬性指向的dom物件或者選擇權對應的html標籤裡面的內容
             * 
             * */
            mounted: function() {
                console.group('------mounted 掛載結束狀態------');
                console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
            },
            /**
             * 4.mounted和beforeUpdate之間，程式實時監控資料變化
             * 
             * */
            beforeUpdate: function() {
                console.group('beforeUpdate 更新前狀態===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            /**
             * 5.beforeUpdate和updated之間，實時更新dom
             * 
             * */
            updated: function() {
                console.group('updated 更新完成狀態===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            beforeDestroy: function() {
                console.group('beforeDestroy 銷燬前狀態===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
            },
            /**
             * 6.例項銷燬
             * 
             * */
            destroyed: function() {
                console.group('destroyed 銷燬完成狀態===============》');
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message)
            }
        })
    </script>
 
</html>

 destroyed（銷燬後）

setup函式的特性以及作用

　　可以確定的是 Vue3.0 是相容 Vue2.x 版本的 也就是說我們再日常工作中 可以在 Vue3 中使用 Vue2.x 的相關語法 但是當你真正開始使用 Vue3 寫專案時 你會發現他比 Vue2.x 方便的多

　　Vue3 的一大特性函式 ---- setup

　　1、setup函式是處於 生命週期函式 beforeCreate 和 Created 兩個鉤子函式之間的函式 也就說在 setup函式中是無法 使用 data 和 methods 中的資料和方法的

　　2、setup函式是 Composition API（組合API）的入口

　　3、在setup函式中定義的變數和方法最後都是需要 return 出去的 不然無法再模板中使用

setup函式的注意點：

　　1、由於在執行 setup函式的時候，還沒有執行 Created 生命週期方法，所以在 setup 函式中，無法使用 data 和 methods 的變數和方法

　　2、由於我們不能在 setup函式中使用 data 和 methods，所以 Vue 為了避免我們錯誤的使用，直接將 setup函式中的this修改成了 undefined

　　3、setup函式只能是同步的不能是非同步的

搜尋

複製

相關推薦

vue學習08——生命週期函式、setup函式

vue中所有的鉤子函式： beforeCreate（建立前）created（建立後）beforeMount（載入前）mounted（載入後）beforeUpdate（更新前）updated（更新後）beforeDestroy（銷燬前）

淺析Vue3相關基礎知識點：setup()入口函式、ref()定義響應式資料、reactive()定義多個響應式資料-深層的、toRefs()轉換為每個屬性都是一個ref、computed()計算屬性、watch()監聽資料、watchEffect()監聽資料變化執行回撥、生命週期對比、provide/inject跨層級元件通訊

一、setup 　　setup是組合Composition API中的入口函式，也是第一個要使用的函式。

理解vue例項的生命週期和鉤子函式

. vue例項的生命週期 通俗來說 vue的生命週期就是vue例項從建立到銷燬的過程，我將這個過程中的一些關鍵點抽取出來，簡化為下面這個流程圖：

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

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

Vue 之五 生命週期鉤子函式 自定義指令 過濾器

一、生命週期鉤子函式 Vue元件的生命週期一共有8個函式目前只需要掌握2個 1 mounted用的最多：向後端傳送請求，定時器初始化2 destroyed：元件銷燬--->給元件寫一個定時器-->元件銷燬，定時器清除

穀粒商城學習——P42生命週期和鉤子函式

官網生命週期圖例 我簡單畫了一下 每個vue例項在被建立時都要經過一系列的初始化過程：建立例項，裝載模板、渲染模板等等。vue為生命週期中的每個狀態都設定了鉤子函式（監聽函式）。每當vue實列處於不同的生命

Vue生命週期介紹和鉤子函式詳解

目錄生命週期介紹和鉤子函式VUE生命週期鉤子Vue生命週期簡介create 和 mounted 相關update 相關destroy 相關總結Vue生命週期介紹和鉤子函式

vue中的生命週期及鉤子函式

目錄1.什麼是生命週期2. 的生命週期3.生命週期鉤子函式1.什麼是生命週期 Vue 例項有一個完整的生命週期，也就是從開始建立、初始化資料、編譯模板、掛載 Dom、渲染 → 更新 → 渲染、解除安裝等一系列過程，我們稱這

Vue Router_兩個生命週期鉤子、路由守衛

1.兩個新的生命週期鉤子 作用：路由元件所獨有的兩個鉤子，用於捕獲路由元件的啟用狀態。

vue物件的生命週期函式（鉤子函式）

        一個元件從建立到銷燬的過程就是生命週期。         beforeCreate:vue物件建立成功前

解決Vue中的生命週期beforeDestory不觸發的問題

分享一句很有用的經驗： 給router-view加了個keep-alive導致元件快取了，所以不會觸發beforeDestory和destoryed

Python入門學習筆記10：函數語言程式設計:匿名函式、高階函式、裝飾器

1 #函數語言程式設計:匿名函式、高階函式、裝飾器 2 3 #匿名函式 4 5 6 def add(x,y):#常規函式

Vue父子元件生命週期執行順序

Vue父子元件生命週期執行順序 結論 載入渲染過程 父beforeCreate -> 父created -> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

Vue物件的生命週期

Vue物件的生命週期 每個Vue物件在建立時都要經過一系列的初始化過程。在這個過程中Vue.js會自動執行一些叫做生命週期的的鉤子函式，我們可以使用這些函式，在物件建立的不同階段加上我們需要的程式碼，實現特定的功能

專案初始化、元件資料區域性化處理、子元件、父元件、路由邏輯跳轉、元件傳參、元件的生命週期鉤子、路由傳、全域性配置自定義css與js、

```python\"\"\"1）路由：邏輯跳轉、路由傳參2）專案元件的資料區域性化處理：data: {} => data: function(){ return {} } => data(){ return{} }3）元件的宣告週期4）元件間通訊5）各種第三方外掛：vuex、axi

Vue父子元件生命週期

Vue父子元件生命週期 Vue例項需要經過建立、初始化資料、編譯模板、掛載DOM、渲染、更新、渲染、解除安裝等一系列過程，這個過程就是Vue的生命週期，Vue中提供的鉤子函式有beforeCreate、created、beforeMount、moun

python學習第11天----生成器、生成器函式、推導式、生成器表示式

1.生成器（generator） 　　生成器的本質就是迭代器 1）生產器的三種生成方法 ①通過生成器函式

在vue框架內用class類、建構函式call繼承、展開引數、引數解構來封裝和引入引用自定義操作dom的js方法

實現一個el-elment校驗器以外的輔助校驗，一個盒子包含多個表單元素，如圖 普通元件形式將校驗隱藏顯示也簡單方便，不贅訴

梳理一下vue中的生命週期

什麼是生命週期？ 生命週期，以個人之淺見，即一個事物從誕生到消亡的一個過程！

08-函式、匿名函式、遞迴

作業 1.定義一個函式 完成使用者輸入的三個數字的求和以及在另一個函式求該和的平均值 ( 用到函式傳參 , 函式返回值 ）