vue :class 動态綁定樣式_前端面試必備的Vue良藥

前沿

内容過多，長達7萬字無法顯示，請到掘金上看https://juejin.im/post/5e6e2a5a5188254974680f6a

置身世外隻為暗中觀察！！！Hello大家好，我是魔王哪吒！重學鞏固你的Vuejs知識體系，如果有哪些知識點遺漏，還望在評論中說明，讓我可以及時更新本篇内容知識體系。歡迎點贊收藏！

轉角遇到Vuejs

1. 你為啥學習Vuejs
2. 前端開發的複雜化
3. Vuejs的特點
4. 安裝Vuejs
5. 體驗Vuejs
6. MVVM架構：data和Vue對象的分離，Vue中的MVVM

目錄：

起步

1. 插值文法：Mustache，v-once，v-html，v-text，v-pre，v-block。
2. 綁定屬性：v-bind的介紹，v-bind的基礎，v-bind的文法糖，綁定class，綁定樣式。
3. 計算屬性
4. 事件監聽：v-on介紹，v-on基礎，v-on參數，v-on修飾符
5. 條件和循環：條件渲染，v-show指令，v-if和v-show對比
6. 表單綁定：基本使用，v-model原理，其他類型，值綁定，修飾符。

元件化開發：

什麼是元件化，Vue元件化開發思想

1. 注冊的步驟
2. 全局和局部元件
3. 父元件和子元件
4. 注冊元件文法糖
5. 模闆的分離寫法
6. 元件的其他屬性
7. 父級向子級傳遞
8. 子級向父級傳遞
9. 父子元件的通路
10. 非父子元件通信

元件化進階文法：

1. 插槽slot：編譯作用域，為什麼使用slot，slot的基本使用，slot的具名插槽，slot的作用域插槽。
2. 動态元件
3. 異步元件
4. 元件聲明周期

Vue Cli

1. 什麼是webpack
2. webpack和gulp對比
3. 手動webpack的配置
4. Vue Cli是什麼
5. Vue Cli依賴環境
6. Vue Cli的安裝

網絡封裝

1. 使用傳統的Ajax是基于XMLHttpRequest(XHR)
2. 使用jQuery-Ajax
3. Vue-resource
4. 使用axios

axios的使用

1. 了解axios：axios請求方式
2. 發送請求，發送get請求，發送并發請求，axios全局配置，常見配置選項。
3. axios執行個體，為什麼建立axios執行個體，如何建立axios執行個體，axios的封裝。
4. axios的攔截器：請求和響應

vuejs原理相關：響應式原理，源碼。

vue.js是什麼

• vue是一套用于建構使用者界面的漸進式架構。
• 從底向上逐層應用，核心庫是隻關注圖層。
• 易于學習，便于與第三方庫或既有項目整合。

Vue基礎文法

對于基礎知識需要掌握，簡單寫寫✍

vue.js安裝

直接CDN引入：

1. 對于制作原型或學習

代碼：

1. 對于生産環境

代碼：

1. NPM

代碼：

# 最新穩定版$ npm install vue           

vue響應式初體驗

聲明式程式設計：

代碼：

{{ a }}

// 我們的資料對象 var data = { a: 1 }; // 該對象被加入到一個 Vue 執行個體中 var vm = new Vue({ el: "#app", data: data }); // data.a = "dada" vm.a = "qianduan"; data.a == vm.a;

小案例-電腦

1. 新的屬性：

   methods

   ，該屬性是用于

   Vue

   對象中定義的方法。
2. 新的指令：

   @click

   ，該指令是用于監聽某個元素的點選事件，并且需要指定當發生點選時，執行的方法。

代碼：

目前計數{{counter}}

+

-

let app = new Vue({ el: '#app', data: { counter: 0 }, methods: { increment(){ this.counter++ }, decrement(){ this.counter-- }, } })

Vue中的MVVM

MVVM的思想

1. view是我們的DOM
2. Model是我們抽離出來的obj
3. ViewModel是我們建立的Vue對象執行個體

它們之間是如何工作的呢？

1. ViewModel通過Data Binding讓obj中的資料實時在DOM中顯示
2. ViewModel通過DOM Listener來監聽DOM事件，并且通過methods中的操作，來改變obj中的資料

• el

  :類型：

  string | HTMLElement

• 作用：決定之後Vue執行個體會管理哪一個

  DOM

• data

  :類型：

  Object | Function

• 作用：Vue執行個體對應的資料對象

• methods

  :類型：

  {[key:string]:Function}

• 作用：定義屬于Vue的一些方法，可以在其他地方調用，也可以在指令中使用。

什麼是Vue的生命周期

生命周期：☞ 事物從誕生到消亡的整個過程

• release

  穩定版本

• debug

  版本

1. Mustache文法也就是雙大括号
2. 插值操作
3. 綁定屬性
4. 計算屬性
5. 事件判斷
6. 循環周遊
7. 階段案例
8. v-model

v-once

指令的使用

{{message}}

{{message}}

v-once

：

1. 該指令後面不需要跟任何表達式
2. 該指令表示元素群組件隻渲染一次，不會随着資料的改變而改變

v-html

：

當我們從伺服器請求到的資料本身就是一個HTML代碼時

1. 如果直接通過

   {{}}

   來輸出，會将

   HTML

   格式進行解析，并且顯示對應的内容。
2. 可以使用

   v-html

   指令
3. 該指令後跟上一個

   string

   類型
4. 會将

   string

   的

   html

   解析處理并且進行渲染

v-text

的作用和

Mustache

比較相似，獨使用于将資料顯示在界面中，一般情況下，接受一個

string

類型。

{{message}}

let vm = new Vue({ el: '#app', data: { message: '你好' } })

v-pre

用于跳過這個元素和它子元素的編譯過程，用于顯示原本的

Mustache

文法。

{{message}}

let app = new Vue({ el: '#app', data: { message: 'hello' } })

v-cloak

鬥篷的意思。

hello{{name}}

setTimeout(()=>{ let app = new Vue({ el: '#app', data: { name: 'web' } }) },10000) [v-cloak] { display: none; }

v-bind的介紹

v-bind

用于綁定一個或多個屬性值，或者向另一個元件傳遞

props

值。

vuejs

let app = new Vue({ el: '#app', data: { } })

v-bind

文法糖

v-bind

有一個對應的文法糖，就是簡寫方式

vuejs

v-bind

動态綁定class

.active{     color: red; }           

{{message}}

const app = new Vue({ el: '#app', data: { message: 'hello' } })

綁定

class

有兩種方式：

1. 對象文法
2. 數組文法

對象文法：

用法一：直接通過{}綁定一個類           

hello

用法二，傳入多個值

hello

用法三：

用法四：可以放在一個methods或者computed中

hello

v-bind

動态綁定class，數組文法

{{mesg}}

{{mesg}}

const app = new Vue({ el: '#app', data: { message: 'hello', active: 'aaa', line: 'bbb', }, methods: { getClasses: function() { return [this.active, this.line] } } })

v-bind

動态綁定style

對象文法和數組文法兩種綁定。

綁定方法：對象文法：

:style="{ color: currentColor, fontSize: fontSize + 'px' }"           

style

後面跟的是一個對象類型，對象的

key

是

css

屬性名稱，對象的

value

是具體賦的值，值可以來自于

data

中的屬性。

綁定方法：數組文法：

style

後面跟的是一個數組的類型，多個值，分割即可。

計算屬性的基本屬性

計算屬性，寫在執行個體的

computed

選項中：

{{firstName}}{{lastName}}

const vm = new Vue({ el: '#app', data: { firstName: 'web', lastName: 'it', } })

{{fullName}}

const vm = new Vue({ el: '#app', data: { firstName: 'jeskson', lastName: 'it', }, computed: { fullName() { return this.firstName + ' ' + this.lastName } } })

計算屬性的緩存：

為什麼使用計算屬性這個東西？

原因：計算屬性會進行緩存，如果多次使用時，計算屬性隻會調用一次。

setter和getter

每個計算屬性都包含一個getter和一個setter

{{fullName}}

{{firstName}}

{{lastName}}

let vm = new Vue({ el: '#app', data: { firstName: 'web', lastName: 'it', }, computed: { fullName: { get() { rturn this.firstName+" "+this.lastName }, set(newValue){ const names = newValue.split(' ') this.firstName = names[0] this.lastName = names[1] } } } })

computed: {    fullName: function() {        return this.firstName+" "+this.lastName    }        // 計算屬性一般是沒有set方法，隻讀屬性。    fullName: {        get: function() {            return this.firstName + " " + this.lastName        }    }}           

const的使用

const的使用，在JavaScript中使用const修飾的辨別符為常量，不可以再次指派。

在es6開發中，優先使用const，隻有需要改變一個辨別符的時候才使用let。

在使用cost定義辨別符，必須進行指派。

常量的含義是指向的對象不能修改，但是可以改變對象内部的屬性。

什麼時候使用const呢？

當我們修飾的辨別符不會被再次指派時，就可以使用const來保證資料的安全性。

const的使用：

const a=20;a = 10; // 錯誤：不可以修改const name; // 錯誤，const修飾的辨別符必須指派           

let和var

塊級作用域：

JS中使用var來聲明一個變量，變量的作用域主要是和函數的定義有關。

對于其他塊定義來說是沒有作用域的，比如if/for等，開發中往往會引發一些問題。

// 監聽按鈕的點選var btns = document.getElementsByTagName('button');for(var i=0; i    (function(i){        btns[i].onclick = function(){            alert('點選了'+i+"個")        }    })(i)}           

let btns = document.getElementsByTagName('button');for(let i=0;i    btns[i].onclick = function(){        alert('點選了'+i+'個')    }}           

塊級作用域

變量作用域：變量在什麼範圍内是可用的。

var func;if(true) {    var name = 'web';    func = function() {        console.log(name); // web    }        func(); // web}// name = 'it'func(); // web -> itconsole.log(name); // web -> it           

沒有塊級作用域引起的問題，for的塊級

var btns = document.getElementsByTagName('button');for(var i=0; i    btns[i].addEventListener('click', function(){        console.log('第'+i+'個按鈕被點選');    })}           

閉包：

var btns = document.getElementsByTagName('button');for(var i=0; i    (function(i){        btns[i].addEventListener('click', function(){          console.log('第'+i+'個按鈕');          })    })(i)}           

為什麼閉包可以解決問題，因為函數是一個作用域。

對象的增強寫法

屬性初始化簡寫和方法的簡寫：

// 屬性的簡寫// es6前let name = 'web'let age = 12let obj1 = {    name: name,    age: age,}console.log(obj1);// es6後let obj2 = {    name, age}console.log(obj2)           

// 方法的簡寫// es6之前let obj1 = {    test: function() {        console.log('obj1')    }}obj1.test();// es6後let obj2 = {    test() {        console.log('obj2')    }}obj2.test();           

v-on基礎

v-on:click="counter++"

點選次數:{{counter}}

按鈕點選

按鈕點選2

let app = new Vue({ el: '#app', data: { counter: 0 }, methods: { btnClick(){ this.counter++ } }})

v-on修飾符的使用

web

按鈕

Vue提供了一些修飾符：

.stop 調用event.stopPropagation().prevent 調用event.preventDefault().native 監聽元件根元素的原生事件.once 隻觸發一次回調                

// 停止冒泡// 阻止預設行為// 阻止預設行為，沒有表達式// 串聯修飾符// 鍵修飾符，鍵别名// 鍵修飾符，鍵代碼// 點選回調智慧觸發一次                

v-if,v-else-if,v-else

簡單使用：

優秀

良好

及格

不及格

登入切換：

使用者賬号：

郵箱位址：

切換類型

let app = new Vue({ el: '#app', data: { type: 'username' }, methods: { handleToggle(){ this.type = this.type === 'email' ? 'username' : 'email' } } })

使用者賬戶

使用者郵箱

切換類型

const app = new Vue({ el: '#app', data: { isUser: true }})

v-for周遊對象

{{value}}-{{key}}-{{index}}

let app = new Vue({ el: '#app', data: { info: { name: 'web', age: 12, } } })

元件的Key屬性

使用v-for時，給對應的元素或元件添加上一個

:key

屬性。

key的作用主要是為了高效的更新虛拟dom。

數組中哪些方法是響應式的

push()pop() 删除數組中的最後一個元素shift() 删除數組中的第一個元素unshift() 在數組最前面添加元素splice()sort()reverse()                

購物車

書籍名稱

出版日期

價格

購買數量

操作

{{value}}

表單綁定v-model

vue中使用v-model指令來實作表單元素和資料的雙向綁定。

{{message}}

reduce作用對數組中所有的内容進行彙總。

JavaScript reduce() 方法

var numbers = [65, 44, 12, 4]; function getSum(total, num) {    return total + num;}function myFunction(item) {    document.getElementById("demo").innerHTML = numbers.reduce(getSum);}                

定義和用法

reduce() 方法接收一個函數作為累加器，數組中的每個值(從左到右)開始縮減，最終計算為一個值。

reduce() 可以作為一個高階函數，用于函數的 compose。

注意: 

reduce()

 對于空數組是不會執行回調函數的。

文法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)                

v-model的使用以及原理

const app = new Vue({  el: '#app',  data: {      message: '你好啊'  },  methods: {      valueChange(event){          this.message = event.target.value;      }  } })                

v-model

是文法糖，本質：

v-bind

綁定一個

value

屬性

v-on

指令給目前元素綁定

input

事件

代碼：

父元件和子元件

元件樹

元件群組件之間存在層級關系其中一種非常重要的關系就是父子元件的關系

示例：

// 建立一個子元件構造器 const childComponent = Vue.extend({  template: `                  

我是子元件的内容

` }) // 建立一個父元件的構造器 const parentComponent = Vue.extend({ template: `

我是父元件的内容

` components: { 'child-cpn': childComponent } }) let app = new Vue({ el: '#app', components: { 'parent-cpn': parentComponent } })

注冊元件的文法糖

示例：全局元件

// 全局元件注冊的文法糖 // 注冊元件 Vue.component('cpn1', {  template: `                  

web

` }) const app = new Vue({ el: '#app', data: { message: 'web', } })

// 注冊局部元件的文法糖const app = new Vue({ el: '#app', data: {     message: 'web' }, components: {     'cpn2': {         template: `                         

web

` } }})

vue

簡化了注冊元件的方式，提供了注冊的文法糖。

元件模闆抽離的寫法

vue

提供了兩種定義

html

子產品内容：

使用

标簽使用

标簽

示例：

web

let app = new Vue({ el: '#app', components: { 'my-cpn': { template: '#myCpn' } } })

template

标簽

web

// 注冊一個全局元件Vue.component('cpn', { template: '#cpn'})

元件可以通路vue執行個體資料嗎

元件是一個單獨的功能子產品封裝，有屬于自己的

html

模闆和自己的資料

data

。

元件對象有一個

data

屬性，

methods

屬性，這個

data

屬性必須是一個函數，函數傳回一個對象，對象内部儲存着資料。

{{message}}

let app = new Vue({ el: '#app', components: { 'my-cpn': { template: 'myCpn', data() { return{ message: 'web' } } } }})

父子通信-父傳子props

如何進行父子元件間的通信呢？

通過

props

向子元件傳遞資料通過事件向父元件發送消息

props

基本用法

在元件中，使用

props

來聲明從父級接收到的資料

props

值：

字元串數組，數組中的字元串就是傳遞時的名稱。對象，對象可以設定傳遞時的類型，也可以設定預設值等。

camelCase

 (駝峰命名法) 的 

prop

 名需要使用其等價的 

kebab-case

 (短橫線分隔命名) 命名：

Vue.component('blog-post', {  // 在 JavaScript 中是 camelCase 的  props: ['postTitle'],  template: '                

{{ postTitle }}

'})

重申一次，如果你使用字元串模闆，那麼這個限制就不存在了。

prop

 各自的名稱和類型：

props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor}                

v-bind: by ' + post.author.name">                

傳入一個對象的所有屬性

如果你想要将一個對象的所有屬性都作為 prop 傳入，你可以使用不帶參數的 

v-bind (取代 v-bind:prop-name)

：

post: {  id: 1,  title: 'My Journey with Vue'}  v-bind:id="post.id"  v-bind:>                

一個簡單的

props

傳遞：

顯示資訊：{{message}}

let app = new Vue({ el: '#app', data: { message: 'hello' }, components: { 'child-cpn': { templte: '#childCpn', props: ['message'] } }})

在 

Vue

 中，父子元件的關系

props

向下傳遞，事件向上傳遞。

父元件通過 

props

給子元件下發資料，子元件通過事件給父元件發送消息。

props

支援的資料類型：

StringNumberBooleanArrayObjectDateFunctionSymbol                

示例：

Vue.component('my-component',{ props: {     // 基礎的類型檢查     propA: Number,     // 多個可能的類型     propB: [String, Number],     // propC: {         type: String,         required: true     },     // 帶有預設值的數字     propD: {         type: Number,         default: 100     },     // 帶有預設值的對象     propE: {         type: Object,          default: function(){              return {message: 'web'}          }     },     // 自定義驗證函數     propF: {         vfunc: function(value) {             return value > 1         }     } }})                

子傳父

代碼：

this.$emit('item-click',item)                

props

用于父元件向子元件傳遞資料，還有一種比較常見的是子元件傳遞資料或事件到父元件中。

自定義事件：

在子元件中，通過

$emit()

來觸發事件。在父元件中，通過

v-on

來監聽子元件事件。

自定義事件代碼：

點選次數

+1

-1

let app = new Vue({ el: '#app', data: { total: 0 }, methods: { changeTotal(counter) { this.total = counter } }, components: { 'child-cpn': { template: '#childCpn', data(){ return{ counter: 0 } }, methods: { increment(){ this.counter++; this.$emit('increment', this.counter) }, decrement(){ this.counter--; this.$emit('decrement',this.counter) } } } }})

父子元件的通路方式：

$children

有時候需要父元件直接通路子元件，子元件直接通路父元件，或者是子元件通路父元件。

父元件通路子元件，使用

$children

或者

$refs

子元件通路父元件，使用

$parent

對于

$children

的通路：

this.$children

是一個數組類型，它包含所有子元件對象。通過周遊，取出所有子元件的

message

狀态。

示例：

// 父元件template                 

顯示所有子元件資訊

// 子元件

我是子元件1

// 子元件

我是子元件2

Vue.component('parent-cpn',{ template: '#parentCpn', methods: { showChildCpn(){ for(let i=0; i console.log(this.$children[i].message) } } }})

父子元件的通路方式：

$parent

子元件中直接通路父元件，可以通過

$parent

雖然可以通過

$parent

來通路父元件，但是盡量不要這樣做子元件應該盡量避免直接通路父元件的資料，因為這樣耦合度太高了。

父子元件的通路方式

$refs

$children

的缺陷：

通過

$children

通路子元件，是一個數組類型，通路其子元件要通過索引值。子元件過多時，需要拿其中一個時，不能确定它的索引值，還可能發生變化。擷取其中一個特定的元件，可以使用

$refs

$refs

的使用：

$refs

和

ref

指令通常一起使用通過

ref

給某個子元件綁定一個特定的

id

通過

this.$refs.id

可以通路到該元件

示例：

通過refs通路子元件show() {    console.log(this.$refs.child1.message);    console.log(this.$refs.child2.message);}                

看看一個

.vue

檔案項目

:

@click="itemClick(index)"

v-for="(item,index) in titles">

{{item}}

export default { name: 'xxx', props: { titles: { type: Array, default() { return [] } } }, data: function() { return { currentIndex: 0 } }, } .xxx { xxx: xxx; }

slot插槽的使用

vue

中的代碼

slot

是什麼呢，它叫插槽，

元素作為元件模闆之中的内容分發插槽，傳入内容後

元素自身将被替換。

v-slot

用法：

預設插槽具名插槽作用域插槽

slot

以及

slot-scope

的用法：子元件編寫，父元件編寫

預設插槽

子元件：

// 子元件                

// 預設插槽

預設值

slot

基本使用

在子元件中，使用

可以為子元件開啟一個插槽。該插槽插入什麼内容取決于父元件如何使用。

子元件定義一個插槽：

中的内容表示，如果沒有在該元件中插入任何其他内容，就預設顯示改内容。

示例：

web

我是誰

Vue.component('my-cpn',{ template: '#myCpn'})let app = new Vue({ el: '#app'})

使用具名插槽

給

slot

元素添加一個

name

屬性

示例：

// 沒有任何内容

// 傳入某個内容

left

left

center

right

1

2

3

Vue.component('my-cpn', { template: '#myCpn' }) let app = new Vue({ el: '#app' })

編譯作用域

Vue

執行個體屬性：

父元件模闆的所有東西都會在父級作用域内編譯，子元件模闆的所有東西都會在子級作用域内編譯。

父元件替換插槽的标簽，但是内容由子元件來提供。

生命周期

首先：

new Vue()

,

new

一個

Vue

的執行個體，

Observe data

資料檢視，

init Events

綁定事件，

created

執行

created

方法，判斷是否有

el

屬性，如果沒有，

vm.$mount(el)

表示處于未挂載狀态，可以手動調用這個方法來挂載。判斷是否有

template

屬性。

如果有

el

屬性，判斷是否有

template

屬性。

執行個體化期和加載期 建立期間的生命周期函數：

beforeCreate

 和 

created

，

beforeMount

 和 

mounted

。

beforeCreate

在執行個體初始化後，資料觀測

data observer

和

event/watcher

事件配置之前被調用。

更新期

運作期間的生命周期函數：

beforeUpdate

 和 

updated

created

執行個體已經建立完成後被調用。

執行個體已完成以下的配置：資料觀測

data observer

，屬性和方法的運算，

watch/event

事件回調。

挂載階段還沒開始，

$el

屬性目前不可見。

beforeMount

在挂載開始之前被調用，相關的

render

函數首次被調用。

mounted

，

vm.$el

已經挂載在文檔内，對已有

dom

節點的操作可以在期間進行。

beforeUpdate

資料更新時調用，發生在虛拟

dmo

重新渲染和打更新檔之前。

updated

當這個鈎子被調用時，元件

dom

已經更新，是以你現在可以執行依賴于

dom

的操作。

activated

，

deactivated

，

beforeDestroy

，

destroyed

。執行個體銷毀之前調用，

vue

執行個體銷毀後調用。

解除安裝期

銷毀期間的生命周期函數：

beforeDestroy

 和 

destroyed

執行個體生命周期鈎子

每個vue執行個體在被建立時都要經過一系列的初始化過程，需要設定資料監聽，編譯模闆，将執行個體挂載到

dom

并在資料變化時更新

dom

等，同時在這個過程中也會運作一些叫做生命周期鈎子的函數。

用于給使用者在不同階段添加自己代碼的機會。

beforeCreate

，此時的

data

是不可見的

data() {    return {        a: 1    }},beforeCreate() {    // red    console.log(this.a); // 看不見}                

created

執行個體已經建立完成後被調用，這個時候你看不見你頁面的内容，執行個體已完成表示：資料觀測

data observer

，屬性和方法的運算，

watch/event

事件回調。

這個時候挂載階段還沒開始，

$el

屬性目前不可見。

export default {    data() {        return {            a: 1        }    },    beforeCreate() {        console.log(this.a);    },    created() {        // red        console.log(this.a);        console.log(this.$el);        // 此時data資料裡面的a可見，this.$el不可見    }}                

beforeMount

在挂載開始之前被調用，相關的

render

函數首次被調用。

export default{    data() {        return {            a: 1        }    },    beforeCreate() {        console.log(this.a); // 不可見    },    created() {        console.log(this.a);        console.log(this.$el); // 不可見    },    beforeMount() {        console.log(this.$el); // 不可見    }}                

mounted

：

export default {    data() {        return {            a: 1        }    },    mounted() {        console.log(this.$el); // 此時$el 可見    }}                

beforeUpdate

鈎子，

dom

更新之前調用：

beforeUpdate() {    console.log(this.a);}// document.getElementById("web").innerHTML                

updated

鈎子，

dom

更新之後調用：

updated() {    console.log(this.a);}// document.getElementById("web").innerHTML                

activated

和

deactivated

(元件)

activated() {    console.log("元件使用了");},deactivated() {    console.log("元件停用了");Data to Drag}                

beforeDestroy

和

destroyed

beeforeDestroy

類型為

function

，詳細：執行個體銷毀之前調用，在這一步，執行個體仍然完全可用。

該鈎子在伺服器端渲染期間不被調用。

destroyed

類型為

function

，詳細：

vue

執行個體銷毀後調用，調用後，

vue

執行個體訓示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子執行個體也會被銷毀。

該鈎子在伺服器端渲染期間不被調用。

beforeRouteEnter

和

beforeRouteLeave

beforeRouteEnter() {    console.log('beforeRouteEnter')},beforeRouteLeave() {    console.log('beforeRouteLeave')}                

vue路由使用的，路由進去和路由離開的時候添加的。

created() {    console.log('開始執行created鈎子函數')    // 擷取data資料    console.log('擷取created屬性'+this.value)    // 擷取頁面元素    console.log(this.$refs['example'])    this.$nextTick(()=>{        console.log('執行created建立的this.$nextTick()函數')    })},mounted() {    console.log('開始執行mounted鈎子函數')    // 擷取挂載資料    console.log('擷取挂載資料--'+this.$refs['example'].innerText)    this.$nextTick(()=>{        console.log('執行mounted建立的this.$nextTick()函數')    })},methods: {    // 更新資料    updateDate(){            },    get(){        this.value='更新data内的value屬性值'        // 擷取頁面元素資料        console.log(this.$refs['example').innerText)        this.$nextTick(()=>{          console.log(this.$refs['example'].innerText)          })    }}                

var vm=new Vue({})

表示開始建立一個

Vue

的執行個體對象，

init events&liftcycle

表示剛初始化了一個

vue

空的執行個體對象，這個時候，對象身上，隻有預設的一些生命周期函數和預設事件，其他東西都沒有建立，

beforeCreate

生命周期函數執行的時候，

data

和

methods

中的資料都沒有初始化。在

created

中，

data

和

methods

都已經被初始化好了，如果要調用

methods

中的方法，或者操作

data

中的資料，隻能在

created

中操作。然後

vue

開始編輯模闆，把

vue

代碼中的那些指令進行執行，最終在記憶體中生成一個編譯好的最終模闆字元串，渲染為記憶體中的

dom

，此時隻是在記憶體中，渲染好了模闆，并沒有把模闆挂載到真正的頁面中去。

beforeMount

函數執行的時候，模闆已經在記憶體中編譯好了，但是尚未挂載到頁面中去。

create vm.$el and replace 'el' with it

這一步是将記憶體中編譯好的模闆，真實的替換到浏覽器的頁面中去。

mounted

，隻要執行完了

mounted

，就表示整個

vue

執行個體已經初始化完了。此時，元件從建立階段進入到了運作階段。

beforeUpdate

執行的時候，頁面中顯示的資料還舊的，而

data

資料是最新的，頁面尚未和最新的資料保持同步。

updated

事件執行的時候，頁面和

data

資料已經保持同步了，都是新的。

virtual dom re-render and patch

執行，先根據

data

中最新的資料，在記憶體中，重新渲染出一份最新的記憶體

dom

樹，當最新的記憶體

dom

樹被更新之後，會把最新的記憶體

dom

樹，重新渲染到真實的頁面中，完成資料從

data

到

view

的更新。

beforeDestroy

鈎子函數執行時，

vue

執行個體就從運作階段，進入到了銷毀階段。此時的執行個體還是可用的階段，沒有真正執行銷毀過程。

destroyed

函數執行時，元件已經被完全銷毀了，都不可用了。

❤️ 愛心三連擊

1.如果覺得這篇文章還不錯，來個分享、點贊、在看三連吧，讓更多的人也看到～

2.關注公衆号超級全棧架構師，領取5000G全棧學習資料，定期為你推送新鮮幹貨好文，每周送書福利，不要錯過喲~

3.掃描下方添加微信，拉你進技術交流群和各大廠的同學一起學習交流成長 ~

你點的每個贊，我都認真當成了喜歡