2. 程式人生 > >vue2——生命週期函式

vue2——生命週期函式

阿新 • • 發佈：2019-01-20
var app = new Vue({ el: '#app', data: { message : "xuxiao is boy" }, 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) }, 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); //已被初始化 }, 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); //已被初始化 }, 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); //已被初始化 }, 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); }, 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); }, 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) } })

相關推薦

vue2——生命週期函式

var app = new Vue({ el: '#app', data: { message : "xuxiao is boy" }, beforeCreate: function () { co

Vue生命週期函式詳解

 vue例項的生命週期 1 什麼是生命週期（每個例項的一輩子） 概念：每一個Vue例項建立、執行、銷燬的過程，就是生命週期；在例項的生命週期中，總是伴隨著各種事件，這些事件就是生命週期函式； 生命週期：例項的生命週期，就是一個階段，從建立到執行，再到銷燬的階段； 生命週期函式：在例項的生命週

iOS開發：第一個iOS程式分析——代理，生命週期函式

上一篇文章中我們開發了第一個iOS應用程式，用來計算兩個整數的和，今天我們將介紹其中的兩個檔案： 1.main.m檔案 首先展開supporting Files並且開啟其下的main.m檔案，其中main函式就是應用程式的入口，main函式只是標記了一個自動釋放池自動決定何時釋放記憶體，

Vue學習(7)————————元件以及生命週期函式，vue-resource請求資料

首先建立一個Home.vue檔案 <template> <div> <p>{{msg}}</p> <button v-on:click="headRun()">跑</button> </di

Vue入門和基礎——生命週期函式

Vue入門和基礎（二） 生命週期函式： 每個Vue例項被建立的時候都要經歷一系列的初始化過程，這個過程就是Vue的生命週期 先上一張官圖 其實官網上已經表明的很詳細了，從圖中我們可以看一個Vue例項的一整個生命週期中有很多個鉤子函式，不用的鉤子函式提供給我們在不同的時期進行操作，如

生命週期函式的使用場景

避免子元件做多次無用的渲染 shouldComponentUpdate(nextProps,nextState){ if( this.props.content!=nextProps.content){ return true }else{ retu

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

vue父元件載入和銷燬執行最後一個鉤子函式之前先執行一遍子元件的鉤子： 1.載入 父:beforecreate-created-beforeMount-（子:beforecreate-created-beforeMount-mounted）-mounted 2.銷燬 父:beforeDestroy--

vue-生命週期函式

還未被解析,我們可以手動新增msg的值 console.log("%c%s","color:red","message: " + this.message); //已被初始化 },

Vue2 生命週期 lifecycle

<!DOCTYPE html> <html> <head> <title>Welcome to Vue</title> <script src="https://unpkg.com/vue"></script>

React生命週期函式

生命週期函式指在某一時刻元件會自動呼叫執行的函式 React生命週期 掛載時的生命週期 componentWillMount // 在元件第一次被掛載到頁面前的時刻執行 componentDidMount // 在元件第一次被掛載到頁面後的時刻執行 更新時的

Vue2 生命週期詳解

<script> /** * Vue生命週期解析 */ export default { /** * name: name * type: string * explain: 允許元件模板遞迴地呼叫自身。 * 注意，元件在全域性用 Vue.compon

ReactNative入門教程-元件生命週期函式

1.元件例項化階段 defaultProps: 設定元件的初始屬性值，比如設定預設Color,width等，可以在通過this.props獲取相應的值 constructor(props): 這裡通過this.props可以獲取defaultProps設定的預設屬性值，同時這裡

React生命週期函式的使用

1.constructor():建構函式 執行時間：元件被載入前最先呼叫，並且僅呼叫一次 作用：定義狀態機變數 注意：第一個語句必須是super（props），正確定義狀態機程式碼如下 constructor(props) { super(props); this.state = { con

React學習之旅----生命週期函式

app.js import React, { Component } from 'react'; // import logo from './assets/images/logo.svg'; // import './assets/css/App.css'; // 引入

vue所有生命週期函式/鉤子函式理解

下邊是一個template 的程式碼，裡邊包含了所有vue 生命週期函式，我們可以vue-cli 專案中新建一個模板把下邊程式碼全都複製進去，然後F12開啟審查元素，觀察這些生命週期函式打印出來的log 裡的區別！ <template> <div class

react中的生命週期函式

萬物皆有生命週期。 生命週期函式指在某一個時刻元件會自動執行的函式。 render constructor也可以理解為一個生命週期函式。在元件一建立的時刻，被自動的呼叫 1、initialzation 元件初始化的時候 （constructor的呼叫

Vue之生命週期函式

<template> <div id="root"> <!-- <div ref="title">{{title}}</div> --&

React 生命週期函式

前言       生命週期函式指某一時刻元件會自動執行的函式，用來管理元件。 先來張大圖便於理解各個周期函式的執行時刻： 一、constructor：            constructor(props) { super(props);//此句必須在該方

Vue的生命週期函式和beforeRouteEnter()/beforeRouteLeave()的函式

用Vue開發了一個專案，雖然專案做完了，但心中卻沒有一個完整的知識體系，不能稱之為會Vue，也許只能稱之為了解，這段時間閒剩下來，找到Vue.js 的官網，簡直了。。。簡直都是自己陌生的各種語法函式，都懷疑自己是怎麼做的專案啦！ 先參考vue官網從簡單的看起！先了解下vue的生命週期。 &n

Vue學習筆記3.2-生命週期函式（順帶記錄Vue的例項的生命週期）

Vue生命週期函式有beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured。共11個。本文直說前8個，另外3