看完包會的Vuejs基礎-有解無憂

理解Vue

- 介紹
- 初識
- Mustache語法{{}}
- MVVM
- 指令
- 自定義指令
- 計算屬性和偵聽器
- - 計算屬性
  - 偵聽器
- 過濾器
- 組件(component)
- - 組件之間的通信
  - - 父組件傳遞子組件
    - 子組件傳遞父組件
- 生命周期（鉤子函式）

介紹

??Vue.js（讀音 /vju?/, 類似于 view）是一個構建資料驅動的 web 界面的漸進式框架，他的目標是通過盡可能簡單的 API 實作回應的資料系結和組合的視圖組件，只關注視圖層，它不僅易于上手，還便于與第三方庫或專案整合，

初識

在此涉及到的一些知識點后面會解釋

首先我們先簡單看看如何使用vue

創建一個 .html 檔案，引入vue，就像引入普通的js檔案一樣

<!-- 格式 -->
<script src="vue.js檔案所在位置"></script>
<!-- 三種方式進行引入 -->
<!-- cdn引入 網路不好的話不推薦-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- npm引入 這種方式需要基于node.js的npm  npm：就是node.js的包管理器 -->
<!-- npm install vue -->

<!-- 把vue.js檔案下載到本地進行參考 -->
<!-- 訪問此鏈接保存此檔案即可
	https://cdn.jsdelivr.net/npm/vue/dist/vue.js
-->

在html中寫入代碼

<body>
	<div id="app">
		<h1>{{message}}</h1>
	</div>
</body>

在js中的代碼

const vm = new Vue({
	el:"#app",
	data:function(){
		return{
			//在此定義資料
			message:"Hello Vue!",
		}
	}
});

得出結果

注：篇幅有點長，但請耐心看完，肯定會有很大的識訓！！！

Mustache語法{{}}

也叫差值運算式用于構造html頁面內容，在實際作業中，當同一個模板中想要呼叫不同的函式來渲染畫面，在已經自定義好了的前提下，可以在渲染頁面時對傳入的引數進行手動判斷，
支持變數和運算式
在vue中使用：{{message}}
message 相當于在js中定義的變數，然后在此語法中進行使用，顯示的是對應的值，

MVVM

mvvm（Model View ViewModel）譯為模型、視圖、視圖模型，其實就是一種軟體架構模式，
在這里插入圖片描述

View層
即視圖層，在我們前端開發中，通常就是DOM層，主要作用是給用戶展示各種資訊
Model層
即資料層，資料可能是我們固定的死資料，更多的是來自我們服務器，從網路上請求下來的資料
ViewModel層
即視圖模型層，是View和Model溝通的橋梁，一方面它實作了Data Binging，也就是資料系結，將Model的改變實時的反應到View中，另一方面他實作了DOM Listener，也就是DOM監聽，當DOM發生一些事件（點擊、滾動等）時，可以監聽到，并在需要的情況下改變對應的Data
這里是簡單的理解一下，以后長時間的使用這種模式，自然就會理解

指令

就是vue事先定義好的，就是對dom元素下命令，拿來用即可

注意：指令都是以 v-** 格式開頭

<body>
	<div v-**=""></div>
</body>

v-text
相當于原生js中的innerText屬性，將指定的值填充到標簽中，會覆寫之前的內容
v-html
相當于原生js中的innerHTML屬性，將指定的值填充到標簽中，會覆寫之前的內容，可決議標簽元素
v-show
根據條件是真或假，來判斷元素是否顯示，改變的是css樣式display:none|block，它只支持布林值
v-if
根據條件是真或者假，來判斷元素是否被渲染，true可以看到這個節點，false該節點不存在，通常與一下兩個指令相配合使用（理解成原生js的if…else if…else即可）
- v-else-if
  當v-if條件不成立此指令接著執行判斷
- v-else
  當v-if和v-else-if都不成立執行此指令

v-for
可對一組資料進行迭代輸出（可迭代的資料都有下標）

<!-- html代碼 -->
<div id="app">
	<h1 v-for="item in datas">{{item}}</h1>
</div>

// js代碼
<script src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data(){
			return{
				// 存放一個陣列，可根據名字訪問值
				datas:["資料1","資料2","資料3"],
			}
		}
	})
</script>

決議運行結果：

以下是各種值的使用：

值是陣列

<p v-for="(item,index) in list" :key="index">--索引值--{{i}}   --每一項--{{item}}</p>

值是陣列物件

<p v-for="(user,index) in listObj" :key="index">--id--{{user.id}}   --姓名--{{user.name}}</p>
<!-- 
	user 是迭代出的每個物件
	user.id 則是獲取這個物件里的屬性
-->

值是物件

<p v-for="(val,key,index) in user" :key="index">--鍵是--{{key}}--值是--{{val}}</p>
<!-- 與其它迭代不一樣的是，迭代物件可以得出三個
 val 物件里屬性對應的值
 key 物件里的屬性也稱為鍵
 index 就是下標了
 -->

值是數值

<p v-for="(count,index) in 10" :key="index">這是第{{count}}次回圈</p>
<!-- 
 	注意：如果使用v-for迭代數字的話，前面 count 的值從 1 開始
 -->

值是字串

<p v-for="(value,index) in str" :key="index">{{value}}---{{index}}</p>

注意：當 Vue 正在更新使用 v-for 渲染的元素串列時，它默認使用“就地更新”的策略，如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染，
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key（即上面代碼里的 :key=“index”）

v-on
用于為一個元素系結事件可簡寫為“@”（原生js的所有事件去掉on都可以使用）
格式：v-on:click=”方法名”，
簡寫：@click=”方法名”,
還有一些常用的修飾符：
??.stop 相當于呼叫event.stopPropagation()
??.prevent 相當于呼叫event.preventDefault()
??.self 當子元素身上事件觸發后向外擴散，擴散到帶有self修飾符的事件不會觸發本事件
??.once 表示只觸發一次此事件的回呼
v-bind
用于為元素動態系結屬性可簡寫為“:” （系結的屬性它的值是動態變化的）
被系結的屬性它的值支持javascript運算式
格式： v-bind:屬性名=”屬性值”，
簡寫： :屬性名=”屬性值”，
其中在系結 class 或 style attribute（屬性）時，支持其它型別的值，如陣列或物件，
- 系結class屬性
  引數可支持物件，陣列
  有幾點要注意下：
  1、普通class屬性可以添加多個值，但被系結以后只能添加一個，可通過陣列形式添加多個
  2、引數是物件，物件中屬性值是一個布林值，表示是否留下該類名，true會把屬性留下，false則相反
- 系結style屬性
  引數可支持物件，陣列
  注意：
  1、CSS屬性名必須用駝峰命名法（官方檔案寫的是既可以用駝峰也可以用短橫分隔命名法），但是用短橫分隔是會報錯的
  2、當用物件時屬性名必須是css樣式的駝峰命名，值則是在vue實體中定義的樣式
v-model
實作了雙向系結，可以獲取表單中輸入的value值
```
   注意：只限制在<input>、<select>、<textarea>、components中使用
```
常用的修飾符
??.lazy 相當于原生js的onchange事件
??.number 輸入字串轉為有效的數字
??.trim 輸入首尾空格過濾
v-slot
是一個插槽，可以理解為，可以在參考組件標簽中寫入內容放在指定的位置，它是為了讓我們封裝的組件更具有擴展性，決定了組件內部的一些內容到底展示什么，
注意：這在組件（component），中使用，可以先跳過，看完組件在回來看

??相當于占位符在組件參考的模板中定義< slot> 標簽進行占位，當參考該組件時，在自定義組件標簽中添加內容就可以進行填充slot標簽
??具名插槽，如果想把內容放在指定位置的插槽內，必須在模板中的插槽標簽中添加name屬性做個標記，然后使用時在需要顯示的標簽上添加 slot=”name名”

插槽使用例圖：
在這里插入圖片描述

v-pre
表示該元素差值運算式不會進行編譯，“{{}}”這里面的東西不會進行編譯，原樣輸出（直接放入標簽中即可，不用給值）
v-cloak
??可以使用 v-cloak 指令設定樣式，這些樣式會在 Vue 實體編譯結束時，從系結的 HTML 元素上被移除，
??當網路較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼，我們可以使用 v-cloak 指令來解決這一問題，

還可以解決閃爍問題：
??當資料量大時未及時渲染會出現閃爍問題，使用屬性選擇器[v-cloak]{display:none};（直接放入標簽中即可，不用給值）
v-once
表示該元素只執行一次，當資料再次渲染值不會改變（直接放入標簽中即可，不用給值）

自定義指令

自定義指令有全域和區域之分
首先明白兩個概念：

全域指令：寫在vue實體外面，每個vue實體掛載元素的范圍內都可以使用，
例子：

// xxx這里表示定義的指令名稱，就比如 v-model、v-on、v-bind，就是v-**這里定義完使用時必須加前綴"v-**"
Vue.directive('xxx', {
	//這里是鉤子函式，下面會仔細講解
    inserted: function (el) {
       //配置指令
    } 
});

區域指令：寫在vue實體里面，只能指定一個vue實體掛載元素的范圍內都可以使用，

var app = new Vue({
    el: '#app', //掛載元素
  	//vue實體里面的所有屬性都是固定寫法
    directives: {
    	// 與全域指令中的xxx一樣，也是表示指令的名字
        xxx: {
           //添加鉤子函式進行配置
        }
    }
});

擴展———鉤子函式
鉤子函式是個函式，是在一個事件觸發的時候，在系統級捕獲到了他，然后做一些操作，一段用以處理系統訊息的程式，
“鉤子”就是在某個階段給你一個做某些處理的機會，
簡單理解，就是不用自己去做，而是有東西幫你做了，就是在相應的時機下幫你處理了一些功能

自定義指令中的鉤子函式：

使用格式

//-------全域自定義指令下-------
Vue.directive("test",{
   bind:function(){
   	//邏輯
   },
   //es6寫法
   inserted(){
   //邏輯
   }
});
//-------區域自定義指令下-------
new Vue({
   el:"#app",
   data(){
   	return{
   	}
   },
   directives:{
   //雙引號可省略
   	"test":{
   		bind:function(){
   			//邏輯
   		},
   		//es6寫法
   		inserted(){
   		//邏輯
   		}
   	}
   	
   	
   }
});

函式	決議
bind	只呼叫一次，指令第一次系結到元素時呼叫，在這里可以進行一次性的初始化設定
inserted	被系結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入檔案中)，
update	所在組件的 VNode 更新時呼叫，但是可能發生在其子 VNode（虛擬 DOM 的 JavaScript 物件）更新之前，指令的值可能發生了改變，也可能沒有，
componentUpdated	指令所在組件的 VNode 及其子 VNode 全部更新后呼叫，
unbind	只呼叫一次，指令與元素解綁時呼叫，

鉤子函式中的引數

引數	決議
el	指令所系結的元素，可以用來直接操作 DOM，
binding	該引數是一個物件，在下面進行決議該物件中的相關屬性
vnode	Vue 編譯生成的虛擬節點，詳解
oldVnode	上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用，

引數binding物件的屬性

屬性	決議
name	獲取指令名，不包括 v- 前綴，
value	指令的系結值，例如：v-my-directive=“1 + 1” 中，系結值為 2
oldValue	指令系結的前一個值，僅在 update 和 componentUpdated 鉤子中可用，無論值是否改變都可用，
expression	字串形式的指令運算式，例如 v-my-directive=“1 + 1” 中，運算式為 “1 + 1”，
arg	傳給指令的引數，可選，例如 v-my-directive:foo 中，引數為 “foo”，
modifiers	一個包含修飾符的物件，例如：v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }，

問題：bind和inserted的區別？
共同點：
	dom插入都會呼叫，bind在inserted之前
不同點：
    bind 執行時父節點為 null
    inserted 執行時父節點存在，
    bind是在dom樹繪制前呼叫，inserted在dom樹繪制后呼叫

計算屬性和偵聽器

計算屬性

簡單理解，就是用來存放一些復雜的處理邏輯，一般就是用來通過其他的資料算出一個新資料，
特點：具有快取能力，當計算屬性中參考的值未發生改變時就一直會拿快取中的資料不會再次執行，提高了運行的速度，

計算屬性格式：

new Vue({
	el:"#app", //掛載元素，指定該vue物件渲染的范圍
	data(){return{}}, // 定義渲染需要用到的資料
	methods:{}, // 渲染時呼叫的普通方法
	directives:{}, // 用于設定自定義區域指令
	//--------
	computed:{ // 使用計算屬性，存放復雜邏輯需要計算的方法
		// 定義方法
		// 注意：方法中必須有return，呼叫時不加括號
	},
})

我理解的計算屬性本質：
??之所以叫計算屬性，其實它本身就是一個屬性，呼叫時不要帶“()”，可能到這里有點蒙（是不是想著跟methods中定義的方法一樣，確實一樣，但是它不是方法就是屬性），它的本質就是，一個物件中的屬性只不過這個屬性有getter和setter方法，一般不會對它進行設定值，只是用來計算獲取值，而進行了簡寫

之所以呼叫時不用括號的原因也就是這樣

偵聽器

Vue 提供了一種更通用的方式來觀察和回應 Vue 實體上的資料變動：偵聽屬性，
當你需要在資料變化回應時，執行異步操作，或高性能消耗的操作，那么watch為最佳選擇，
（簡單理解，就是就是看著一個東西它有沒有改變，改變就執行對應的方法，沒有就不執行）

偵聽器格式

new Vue({
	el:"#app", //掛載元素，指定該vue物件渲染的范圍
	data(){return{}}, // 定義渲染需要用到的資料
	methods:{}, // 渲染時呼叫的普通方法
	directives:{}, // 用于設定自定義區域指令
	computed:{}// 使用計算屬性，存放復雜邏輯需要計算的方法
	//--------
	watch:{
		監聽的誰:function(newValue,oldValue){}
			// newValue 修改后的內容
			//oldValue 修改前的內容
	}
})

相關面試題

計算屬性中computed的方法和methods中的方法的區別？

計算屬性中的方法呼叫時不用加括號，而methods的方法呼叫時需要加
計算屬性的每一個計算方法都會被快取起來，只有當計算屬性里面依賴的一個或多個屬性變化了，才會重新計算當前計算屬性的值，而相反methods中的方法不會快取，

過濾器

這個其實很好理解（其實就是例如當一個人進入了一家店，然后換了身衣服出來了，俗話說人襯衣服，馬襯鞍，然后出來就變了個樣）

過濾器有全域過濾器和區域過濾器之分，常用于格式化文本資料
過濾器可以用在兩個地方：

雙花括號插值

<!-- 在雙花括號中使用 -->
{{ message | filterName}}

v-bind運算式中，

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | filterName"></div>

全域過濾器
在所有vue物件中掛載的范圍內都可以使用
格式：

Vue.filter( filterName，function(msg){//msg傳入的需要過濾的值
 	return // 資料處理結果 回傳出去
 }); 
/*
	在模板中使用過濾器時，過濾器會把“|”這個符號前面的值作為第一個引數，傳到過濾器中進行相關的操作，
	也可指定給過濾器進行傳值，例如：
	{{ message | filterName('張三',20)}}
	
	Vue.filter( filterName，function(msg,name,age){
		// msg 就是上面這個“|”左邊的值
		// name，age就是分別對應上面指定傳入的值（張三，20）
 		return msg+ name + age;
 	}); 
*/

舉例：

<div id="app">
    <h3>{{viewContent | addNamePrefix}}</h3>
</div>

<script>
    Vue.filter("addNamePrefix",(value)=>{
        return "my name is" + value
    })
    let vm = new Vue({
        el:"#app",
        data(){
	        return{
	        	viewContent:"張三" ,
	        }
        }
    })
</script>

區域過濾器
定義在每個vue實體中，只有在定義過濾器所在的vue物件掛載的范圍內可以使用
（其實都差不多，就是位置上有點不一樣，功能都是一樣的）

舉例：

<div id="app">
    <p>電腦價格：{{price | addPriceIcon}}</p>
</div>

<script>
 let vm = new Vue({
    el:"#app",
    data:{
        price:200
    },
    filters:{
        //處理函式
        addPriceIcon(value){
            console.log(value)//200
            return '￥' + value
        }
    }
 })
</script>

組件(component)

其實組件是vue強大功能之一，可以認為它是對html標簽進行擴展，可以把相同的代碼進行復用，
注意：因為組件是可復用的vue實體所以它們與new Vue實體接收相同的選項（可以認為vue實體自身就是一個組件）

組件也有全域組件和區域組件之分

全域組件

//格式----
Vue.component("組件名",{
		//這里面也可以使用vue實體里面的選項，比如像methods、computed、watch、filters、...
		data(){
			return{
				//要渲染的內容`
			}
		},
		template:"<div>這是一個自定義組件</div>" ,//模板內容
		/*
		template 可以指定顯示的html標簽，就是模板用于顯示到頁面上
		*/
});

然后在vue實體掛載的元素中使用

<div id=”app”>
	<組件名></組件名>
<div>

區域組件

new Vue({
	el:”#app”, //掛載元素，指定該vue物件渲染的范圍
	data(){return{}}, // 定義渲染需要用到的資料
	methods:{}, // 渲染時呼叫的普通方法
	directives:{}, // 用于設定自定義區域指令
	computed:{},// 使用計算屬性，存放復雜邏輯需要計算的方法
	watch:{},//用于監聽一個資料的變化
	//--------
	// 在vue實體中加入
	components:{// 注冊組件
		//組件名
		"組件名":{
			// 參考模板（外部使用template標簽創建模板）
			//可指定選擇器，也可在這里直接寫
            template:"[selector|直接寫入]",
			//區域組件上面的選項在這里面也可以使用
		}
	},
})

區域組件使用時與全域組件使用方法一致

組件復用
可以將組件進行任意次數的復用

<div id=”app”>
	<組件名></組件名>
	<組件名></組件名>
	<組件名></組件名>
	…
<div>

注意事項
a. 組件的模板中的html元素必須有一個元素包裹著
b. 組件中的data必須是一個函式
c. 組件如果是駝峰命名，使用時必須把大寫換成-小寫

實體
html代碼

<div id="app">
   <my-div></my-div>
</div>

<!-- 組件需要的模板定義在外面 -->
<template id="test">
    <!-- 注意：模板中的元素必須都包裹在一個塊元素中 -->
    <div>
        <h2>組件模板結構---{{message}}</h2>
        <ul>
            <li>串列1</li>
            <li>串列2</li>
            <li>串列3</li>
            <li>串列4</li>
        </ul>
        <button @click="changeMsg">修改msg</button>
    </div>
</template>

js代碼

<script>
   new Vue({
       el:"#app", //掛載元素
       data(){ //存放渲染需要的資料
           return{}
       },
       // 注冊區域組件
       components:{
          "my-div":{
              // 參考模板
              template:"#test",
              data(){
                  return{
                      message:"hello component"
                  }
              },
              methods:{
                  changeMsg:function(){
                      this.message = "修改后的msg";
                      console.log(this);//VueComponent
                  }
              },
          },
      },
  });
</script>

運行結果
jieguo

組件之間的通信

父組件傳遞子組件

父組件可以使用 props 把資料傳給子組件，
步驟
a. 在父組件中參考子組件時，在子組件標簽上系結自定義屬性，其屬性值是父組件里的data方法中的資料，如 :自定義名=“父組件值”（注：自定義屬性名不能有大寫字母）

b. 在子組件中通過props接收系結的屬性，如果有多個可用物件或陣列進行存盤

// 注冊全域組件
Vue.component("hg-son",{
     /*
         props 可以是陣列或物件，用于接收來自父組件的資料，
         props 可以是簡單的陣列，或者使用物件作為替代，物件允許配置高級選項，如型別檢測、自定義校驗和設定默認值
     */ 
     // 使用props進行接收
     props:["msg","num"], //接收在組件上系結的屬性，陣列形式
     // 引入模板
     template:"#hg"
 })

c. 然后在子組件的模板中使用props中的值，即可
附：草圖

子組件傳遞父組件

子組件可以使用 $ emit() 觸發父組件的自定義事件，
a. 在子組件中廣播資料使用$emit(“自定義事件”,資料) 創建事件并攜帶子組件中的資料

b. 然后在引入的子組件標簽上系結此自定義的事件，此事件的值是父組件的方法，該自定義事件所攜帶的資料可以通過父組件方法中data引數接收

html

<!--子組件傳值給父組件 
    1. 在子組件中中廣播資料
    2. 在使用子組件的時候系結自定義事件
 -->
 <!-- 定義模板 -->
 <template id="hg">
     <div>
         <h2>子組件向父組件傳遞值</h2>
         <ul>
             <li>子組件串列</li>
         </ul>
         <button @click="sendParentfn">子組件中的按鈕-給父組件傳值</button>
     </div>
 </template>
 <!-- 父組件 -->
<div id="app">
    <p>接收子組件傳遞的資料：{{parentMsg}}</p>
    <!-- 2. 參考子組件
        使用自定義事件，值是想要把資料傳入到哪
    -->
    <hg-son @toparent="getSonfn"></hg-son>
</div>

<script>
    // 注冊全域組件
    Vue.component("hg-son",{
        //參考模板
        template:"#hg",
        data(){
            return{
                sonMessage:"msg是子組件中的資料"
            }
        },
        methods:{
            sendParentfn(){
                console.log(this);
                //1. 使用$emit廣播資料，toparent是一個自定義事件
                // sendParentfn事件被觸發后該自定義事件自動觸發
                this.$emit("toparent",this.sonMessage);
            }
        }
    });
    // 創建vue實體
    new Vue({
        el:"#app",
        data(){
            return{
                parentMsg:"msg是父組件中的資料"
            }
        },
        methods:{
            // 自定義事件會將值傳入此方法的data中
            getSonfn(data){
                this.parentMsg = data;
            }
        }
    });

</script>

結合代碼，多讀幾遍步驟，仔細理解

生命周期（鉤子函式）

每個 Vue 實體在被創建時都要經過一系列的初始化程序——例如，需要設定資料監聽、編譯模板、將實體掛載到 DOM 并在資料變化時更新 DOM 等，同時在這個程序中也會運行一些叫做生命周期鉤子的函式，（這里只說下常用的）

使用格式：

new Vue({
	el:"#app", //掛載元素，指定該vue物件渲染的范圍
	data(){return{}}, // 定義渲染需要用到的資料
	methods:{}, // 渲染時呼叫的普通方法
	directives:{}, // 用于設定自定義區域指令
	computed:{}// 使用計算屬性，存放復雜邏輯需要計算的方法
	watch:{} // 監聽vue實體中資料的變化
	//--------
	//普通寫法
	beforeCreate:function(){
		//...
	},
	//ES6寫法
	beforeCreate(){
		//...
	},
	//...
})

beforeCreate()
此生命周期是vue實體創建之前自動呼叫，因為實體還沒有創建，相關資料都還沒有初始化，所以不能在此生命周期中進行資料的修改和使用，
created()
此生命周期是vue實體創建完成后自動呼叫，此時實體中資料已經初始化完畢，可以對資料進行修改和使用，但是實體還沒有進行掛載元素
beforeMount()
此生命周期是vue實體編譯之前自動呼叫，此時實體中元素已經掛載，但還沒有渲染到頁面上
mounted()
此生命周期是vue實體編譯完成后自動呼叫，vue實體的所有作業都已完成，在此可以進行dom的操作和ajax的請求，但mounted不會保證所有的子組件也都一起被掛載，如果希望全部被掛載后操作，可以在該生命周期中使用實體的vm.$nextTick()
格式：
```
mounted: function () {
  this.$nextTick(function () {
    //在此處操作
  })
}
```
beforeUpdate()
此生命周期是vue實體的模板更新之前自動呼叫，第一次的渲染不會呼叫，只有渲染完等模板上的內容再次修改之后進行呼叫，
這里適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器，
updated()
此生命周期是vue實體的模板更新完成后自動呼叫，
beforeDestroy()
此生命周期是vue實體銷毀之前自動呼叫，在這一步，實體還可以使用，
destroyed()
此生命周期是vue實體銷毀完成后自動呼叫，對應vue實體的所有指令都會被解綁，所有事件都會被移除，所有子實體都會被銷毀，
可以使用**vm.$destroy()**手動銷毀

到這里就結束了，后續還會更新vue全家桶相關，還請持續關注！
感謝閱讀，若有錯誤可以在下方評論區留言哦！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/241861.html

標籤：其他

上一篇：一個好看的input輸入影片

下一篇：HTML＋CSS＋JS 瀑布流式布局（實作懶加載）