當(dāng)前位置：首頁 > news >正文

蘭州吸引用戶的網(wǎng)站設(shè)計(jì)微信推廣引流加精準(zhǔn)客戶

news 2025/7/7 8:16:53

蘭州吸引用戶的網(wǎng)站設(shè)計(jì),微信推廣引流加精準(zhǔn)客戶,廣告設(shè)計(jì)網(wǎng)站都有哪些,網(wǎng)站建設(shè)icp備案簡介 Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JS框架。構(gòu)建用戶界面：就是將后端返回來的數(shù)據(jù)以不同的形式(例如：列表、按鈕等)顯示在界面上。漸進(jìn)式：就是可以按需加載各種庫。簡單的應(yīng)用只需要一個(gè)核心庫即可，復(fù)雜的應(yīng)用可以按照需求…

簡介

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JS框架。

構(gòu)建用戶界面：就是將后端返回來的數(shù)據(jù)以不同的形式(例如：列表、按鈕等)顯示在界面上。
漸進(jìn)式：就是可以按需加載各種庫。簡單的應(yīng)用只需要一個(gè)核心庫即可，復(fù)雜的應(yīng)用可以按照需求引入各種Vue插件。

特點(diǎn)

采用組件化模式，提高代碼復(fù)用率、且讓代碼更好維護(hù)。
聲明式編碼，讓編碼人員無需直接操作DOM，提高開發(fā)效率。

入門案例

<!DOCTYPE html>
<head><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body><div id="root"><h1>Hello {{name}}</h1>//{{name}} 為vue里面的模板</div><script type="text/javascript">Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示//容器與vue實(shí)例只能時(shí)一對一的關(guān)系new Vue({el:"#root",//通常為ucss選擇器data:{name:"Vue"}})//root已經(jīng)被第一個(gè)vue接管了，因此這個(gè)vue實(shí)例是無效的// new Vue({//     el:"#root",//通常為ucss選擇器//     data:{//         name:"Vue1"//     }// })</script>    
</body>

總結(jié)：

Vue實(shí)例和容器是一對一的關(guān)系
真實(shí)開發(fā)過程中只有一個(gè)Vue實(shí)例，并且會(huì)配合組件一起使用
{{xxx}}中的xxx要寫js表達(dá)式，且xxx可以自動(dòng)讀取到data中的所有屬性
一旦data中的數(shù)據(jù)發(fā)生變化，那么頁面中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更新

模板語法

Vue模板語法分為2大類：

插值語法：
功能：用于解析標(biāo)簽體內(nèi)容。
寫法：{{xxx}}，xxx是js表達(dá)式，且可以直接讀取到data中的所有屬性。
指令語法：
功能：用于解析標(biāo)簽（包括：標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件…）。
舉例：v-bind:href='xxx’或簡寫為:href=‘xxx’，xxx同樣要寫js表達(dá)式，且可以直接讀取到data中的所有屬性。
備注：Vue中有很多的指令，且形式都是：v-???。

<!DOCTYPE html>
<head><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body><div id="root"><h1>Hello {{name}}</h1><a v-bind:href="url">點(diǎn)我</a>//v-bind是數(shù)據(jù)單向綁定的</div><script type="text/javascript">Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示//容器與vue實(shí)例只能時(shí)一對一的關(guān)系new Vue({el:"#root",//通常為ucss選擇器data:{name:"Vue",url:"https://www.baidu.com"}})</script>    
</body>

數(shù)據(jù)綁定

數(shù)據(jù)綁定分為雙向數(shù)據(jù)綁定與單項(xiàng)數(shù)據(jù)綁定。這點(diǎn)與Android中的jetpack組件databinding一致。畢竟Vue也是采用了MVVM模型。

單向綁定(v-bind):數(shù)據(jù)只能從data流向頁面。
雙向綁定(v-model):數(shù)據(jù)不僅能從data流向頁面，還可以從頁面流向data。
備注：
1. 雙向綁定一般都應(yīng)用在表單類元素上（如：input、select等）。
2. v-model:value 可以簡寫為v-model，因?yàn)関-model默認(rèn)收集的就是value值。

<!DOCTYPE html>
<head><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body><div id="root">單向數(shù)據(jù)綁定：<input type="text" v-bind:value="name"/><br/>//input組件里的內(nèi)容改變不會(huì)導(dǎo)致vue里面的存儲的數(shù)據(jù)改變//v-model只能用于表單類元素中(輸入類元素)雙向數(shù)據(jù)綁定：<input type="text" v-model:value="name"/><br/>//input組件里的內(nèi)容改變會(huì)導(dǎo)致vue里面的存儲的數(shù)據(jù)改變</div><script type="text/javascript">Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示//容器與vue實(shí)例只能時(shí)一對一的關(guān)系new Vue({el:"#root",//通常為ucss選擇器data:{name:"Vue",url:"https://www.baidu.com"}})</script>    
</body>

el與data的兩種寫法

 const v=new Vue({//1.第一種寫法el:"#root",//通常為ucss選擇器data:{name:"Vue",url:"https://www.baidu.com"}})
//第二種寫法
v.$mount("#root")

data

//第一種寫法：data:{name:"Vue",url:"https://www.baidu.com"}//第二種寫法：
data:function(){console.log('@@@',this)//此處的this是Vue實(shí)例return{name :"hello world"}
}//可以簡寫為：
data{console.log('@@@',this)//此處的this是Vue實(shí)例return{name :"hello world"}
}

一個(gè)重要原則：由Vue管理的函數(shù)，一定不要寫箭頭函數(shù)，因?yàn)榧^函數(shù)是沒有自己的this對象的，只能往外找(箭頭函數(shù)的this對象是window)，一旦寫了箭頭函數(shù)，函數(shù)里面的this就不再是Vue實(shí)例了。

MVVM模型

M：模型（model）：data中的數(shù)據(jù)
V：視圖（View）：模板代碼
VM：視圖模型（ViewModel）：Vue實(shí)例

在這里插入圖片描述

總結(jié)：

data中所有的屬性，最后都出現(xiàn)在了vm上。
vm身上的所有屬性以及Vue原型上的所有屬性，在Vue模板中都可以直接使用。

數(shù)據(jù)代理

Vue中的數(shù)據(jù)代理：通過vm對象來代理data對象中屬性操作(讀/寫)。
Vue中數(shù)據(jù)代理的好處：更加方便地操作data中的數(shù)據(jù)。
基本原理：通過Object.defineProperty()把data對象中所有屬性添加到vm的_data屬性上。為每一個(gè)添加到vm上的屬性，都指定一個(gè)getter/setter方法，在getter/setter內(nèi)部去操作(讀/寫)data中對應(yīng)的屬性。

 <script type="text/javascript">Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示//容器與vue實(shí)例只能時(shí)一對一的關(guān)系let data={name:"Vue",url:"https://www.baidu.com"};const v=  new Vue({el:"#root",//通常為ucss選擇器data})console.log("====v._data==data ==>"+(v._data==data)) //true//修改_data的屬性也可以修改view中的值// v._data.name = "Hello"</script>

 <script type="text/javascript">Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示//容器與vue實(shí)例只能時(shí)一對一的關(guān)系let age =10let data={name:"Vue",url:"https://www.baidu.com"};const v=  new Vue({el:"#root",//通常為ucss選擇器data})//通過 Object.defineProperty方法為對象添加屬性Object.defineProperty(data,'age',{enumerable :true, //控制屬性是否可以被枚舉，默認(rèn)是falsewritable:true,//控制屬性是否可以被修改，默認(rèn)是falseconfigurable:true ,//控制屬性是否可以被刪除，默認(rèn)是falseget(){console.log("有人讀取了age屬性")return age},set(value){console.log("有人修改了age屬性，值是",value)age = value}})console.log(Object.keys(data))</script>

事件處理

事件的基本使用：

使用v-on:xxx或@xxx綁定事件，其中xxx是事件名
事件的回調(diào)需要配置在methods對象中，最終會(huì)在vm上
methods中配置的函數(shù)，不要用箭頭函數(shù)，否則this就不是vm
methods中配置的函數(shù)，都是被Vue所管理的函數(shù)，this的指向是vm或組件實(shí)例對象
@click=‘demo’和@click='demo($event)'效果一致，但后者可以傳參

<!DOCTYPE html>
<head><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body><div id="root"><button @click="showInfo($event,11)">點(diǎn)我</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示//容器與vue實(shí)例只能時(shí)一對一的關(guān)系let age =10let data={name:"Vue",url:"https://www.baidu.com"};const v=  new Vue({el:"#root",//通常為ucss選擇器data,methods:{showInfo(event,num){alert('num is '+num +"event is "+event);}}})</script>    
</body>

事件修飾符

prevent：阻止默認(rèn)事件(常用)
stop：阻止事件冒泡（常用）
once：事件只觸發(fā)一次（常用）
capture：使用事件的捕獲模式
self：只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件
passive：事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)函數(shù)執(zhí)行完畢

   <button @click.stop.prevent="showInfo($event,11)">點(diǎn)我</button>//事件修飾符可以鏈?zhǔn)秸{(diào)用

鍵盤事件

Vue中常用的按鍵別名：


回車	enter
刪除(包括“刪除”和“退格”鍵)	delete
退出	esc
空格	space
換行	tab（需要配合keydown使用）
上	up
下	down
左	left
右	right

Vue中未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為keytab-case(短橫線命名)
系統(tǒng)修飾鍵(用法特殊)：ctrl、alt、shift、meta
1. 配合keyup使用：按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)
2. 配合keydown使用：正常觸發(fā)事件
也可以使用keycode去指定具體的按鍵(不推薦，有些鍵盤的keycode不統(tǒng)一)
Vue.config.keyCodes.自定義鍵名=鍵碼?？梢远ㄖ瓢存I別名

<input @keyup.caps-lock ='showInfo(12)' type="text" v-bind:value="name"/><br/>
<input @keydown.tab.y ='showInfo(12)' type="text" v-model:value="name"/><br/>
<input @keydown.ctrl.y ='showInfo(12)' type="text" v-model:value="name"/><br/>//點(diǎn)擊ctrl+y才調(diào)用showInfo方法

計(jì)算屬性

定義：要用的屬性不存在，要通過已有屬性(注意是vm已有的屬性，如果是通過變量是不行的)計(jì)算得來
原理：底層借助Object.defineproperty方法提供的getter和setter
get函數(shù)什么時(shí)候執(zhí)行？
1. 初次讀取時(shí)會(huì)執(zhí)行一次
2. 當(dāng)依賴的數(shù)據(jù)發(fā)生變化時(shí)會(huì)被再次調(diào)用
優(yōu)勢：與methods相比，內(nèi)部右緩存機(jī)制，效率高，調(diào)試方便
備注：1.計(jì)算屬性最終會(huì)出現(xiàn)在vm上，直接讀取使用即可；2.如果計(jì)算屬性被修改，那必須寫set函數(shù)去響應(yīng)修改，且set中要引起計(jì)算時(shí)依賴的數(shù)據(jù)發(fā)生變化。

<!DOCTYPE html>
<head><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body><div id="root">單向數(shù)據(jù)綁定：<input @keyup.caps-lock ='showInfo(12)' type="text" v-bind:value="name"/><br/>雙向數(shù)據(jù)綁定：<input @keydown.ctrl.y ='showInfo(12)' type="text" v-model:value="url"/><br/><button @click="showInfo($event,11)">點(diǎn)我</button><h1>{{fullName}}</h1></div><script type="text/javascript">Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示//容器與vue實(shí)例只能時(shí)一對一的關(guān)系let age =10let data={name:"Vue",url:"https://www.baidu.com"};const v=  new Vue({el:"#root",//通常為ucss選擇器data,//計(jì)算屬性computed:{//1.完整寫法fullName:{get(){return this.name+'-'+this.url},//當(dāng)fullName被修改時(shí)，set方法被調(diào)用set(value){console.log('set',value)const arr = value.split('-')this.name = arr[0]this.url = arr[1]}}//2.簡寫方法，只有讀才能夠使用簡寫方式fullName[:function](){//:function也是可以省略的return this.name+'-'+this.url}}})</script>    
</body>

監(jiān)視屬性——watch

當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)操作。
監(jiān)視的屬性必須存在，才能進(jìn)行監(jiān)視。
Vue中的watch默認(rèn)不監(jiān)測對象內(nèi)部值的改變(一層)。
配置deep:true可以監(jiān)測對象內(nèi)部值改變(多層)。
監(jiān)視的兩種寫法：1.new Vue時(shí)傳入watch配置；2.通過vm.$watch監(jiān)視。
備注：1.Vue自身可以監(jiān)測對象內(nèi)部值的改變，但Vue提供的watch方法默認(rèn)不可以；2.使用watch時(shí)根據(jù)數(shù)據(jù)具體結(jié)構(gòu)，決定是否采用深度監(jiān)測。

  const v=  new Vue({el:"#root",//通常為ucss選擇器data,computed:{fullName(){return this.name+'-'+this.url}},//第1種寫法watch:{info:{//監(jiān)視info屬性immediate:true,//初始化讓handler調(diào)用一下//handler什么時(shí)候被調(diào)用？當(dāng)info發(fā)生改變時(shí)handler(newValue,oldValue){console.log('info被修改了',newValue,oldValue)}}}})//第2種寫法vm.$watch('info',{deep:true,//監(jiān)視多級結(jié)構(gòu)種某個(gè)屬性的變化immediate:true,//初始化讓handler調(diào)用一下//handler什么時(shí)候被調(diào)用？當(dāng)info發(fā)生改變時(shí)handler(newValue,oldValue){console.log('info被修改了',newValue,oldValue)}})

計(jì)算屬性vs監(jiān)視屬性

computed和watch之間的區(qū)別：

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以進(jìn)行異步操作。
重要原則：
1. 所有被Vue管理的函數(shù)，最好寫成普通函數(shù)，這樣this的指向才是vm或組件實(shí)例對象。
2. 所有不被Vue所管理的函數(shù)(定時(shí)器的回調(diào)函數(shù)、ajax的回調(diào)函數(shù)等、Promise的回調(diào)函數(shù))，最好寫成箭頭函數(shù)。這樣this的指向才是vm或組件實(shí)例對象。

Vue監(jiān)視數(shù)據(jù)的原理

vue會(huì)監(jiān)視data中所有層次的數(shù)據(jù)
如何監(jiān)測對象中的數(shù)據(jù)？
通過setter實(shí)現(xiàn)監(jiān)視，且要在new Vue時(shí)就傳入要監(jiān)視的數(shù)據(jù)。
（1）對象中后追加的屬性，Vue默認(rèn)不做響應(yīng)式處理
（2）如需給后添加的屬性做響應(yīng)式，使用如下API:Vue.set()/vm.$set()
如何監(jiān)測數(shù)組中的數(shù)據(jù)？
在Vue修改數(shù)組中的某個(gè)元素一定要用如下方法：
1. 使用這些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2. Vue.set()或vm.$set()
特別注意：Vue.set和vm.$set不能給vm或vm的跟數(shù)據(jù)對象添加屬性！！！

綁定樣式

在 Vue.js 中，我們可以使用 v-bind 指令來綁定 style 樣式和 class 樣式。主要有兩種方式綁定 class 和 style，分別是對象語法和數(shù)組語法。以下是兩種方式的使用：

對象語法的綁定方式

在需要綁定 style，類名時(shí)可以使用 v-bind 綁定一個(gè)對象，對象中的 key 就是需要添加的樣式名或類名，value 則是這個(gè)樣式是否需要添加。

綁定class樣式：

<div v-bind:class="{ active: isActive }"></div>

在上面的代碼中，只有在isActive為true時(shí)，才會(huì)給這個(gè)div添加一個(gè)名為active的類。

綁定style樣式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

在這里，activeColor和fontSize是定義在Vue實(shí)例或組件選項(xiàng)中的數(shù)據(jù)。

數(shù)組語法的綁定方式

另一種方式就是將一個(gè)包含樣式名或類名的數(shù)組 bind 到 class 或者 style。不管數(shù)組元素的個(gè)數(shù)是多少，數(shù)組元素可以是字符串或?qū)ο蟆?/p>

綁定class樣式：

<div v-bind:class="[activeClass, errorClass]"></div>

在這個(gè)例子中，activeClass和errorClass都應(yīng)該是之前已經(jīng)定義過的數(shù)據(jù)屬性。

綁定style樣式：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

在這個(gè)例子中，baseStyles和overridingStyles都是之前定義過的樣式對象。

條件渲染

v-if
1. 寫法：1. v-if=‘表達(dá)式’； 2. v-else-if = ‘表達(dá)式’；3. v-else=‘表達(dá)式’
2. 適用于：切換頻率較低的場景。
3. 特點(diǎn)：不展示的DOM元素直接被移除
4. 注意：v-if可以和v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被”打斷“
5. v-if可以和template一起使用

 <template v-if="true"><h1>Hello</h1><h2>sdsdsd</h2></template>

v-show
1. 寫法：v-show=‘表達(dá)式’
2. 適用于：切換頻率較高的場景
3. 特點(diǎn)：不展示的DOM元素未被移除，僅僅是樣式隱藏掉
備注：使用v-if時(shí)，元素可能無法獲取到，而使用v-show一定可以獲取到

在這里插入圖片描述

列表渲染

在這里插入圖片描述

過濾器

定義：對要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示（適用于一些簡單邏輯的處理）。
語法：
1. 注冊過濾器：Vue.filter(name,callback)或new Vue(filters:{}).
2. 使用過濾器：{{xxx|過濾器名}} 或v-bind:屬性="xxx | 過濾器名 "
備注：
1. 過濾器也可以接受額外參數(shù)，多個(gè)過濾器也可以串聯(lián)
2. 并沒有改變原本的數(shù)據(jù)，時(shí)產(chǎn)生新的數(shù)據(jù)

<!DOCTYPE html>
<head><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body><div id="root"><h3>{{time|timeFormation('YYYY_MM_DD')|mySlice}}</h3></div><script type="text/javascript">Vue.config.productionTip = false //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示//全局過濾器Vue.filter('mySlice',function(value){return value.slice(0,4)})let age =10let data={name:"Vue",url:"https://www.baidu.com",time:1621685748334};const v=  new Vue({el:"#root",//通常為ucss選擇器data,//局部過濾器filters:{timeFormation(value,str='YYYY年MM月DD日 HH:mm:ss'){return dayjs(value).format(str)},mySlice(value){return value.slice(0,4)}}})vm.$watch('info',{immediate:true,//初始化讓handler調(diào)用一下//handler什么時(shí)候被調(diào)用？當(dāng)info發(fā)生改變時(shí)handler(newValue,oldValue){console.log('info被修改了',newValue,oldValue)}})</script>    
</body>

v-once指令

v-once所在節(jié)點(diǎn)初次動(dòng)態(tài)渲染后，就視為靜態(tài)內(nèi)容了
以后數(shù)據(jù)的改變不會(huì)引起v-once所在結(jié)構(gòu)的更新，可以用于性能優(yōu)化

v-cloak指令

本質(zhì)上是一個(gè)特殊屬性，Vue實(shí)例創(chuàng)建完畢并接管容器后，會(huì)刪掉v-cloak屬性
配合使用css的{ display: none }可以解決網(wǎng)速慢時(shí)頁面展示出{{xxx}}的問題

v-html指令

向指定節(jié)點(diǎn)中渲染包含html結(jié)構(gòu)的內(nèi)容。
v-html替換節(jié)點(diǎn)中所有的內(nèi)容，{{xxx}}則不會(huì)；v-html可以識別html結(jié)構(gòu)。
v-html有安全性問題：1.在網(wǎng)站上動(dòng)態(tài)渲染任意html是非常危險(xiǎn)的，容易導(dǎo)致XSS攻擊；一定要在可信的內(nèi)容上使用v-html，永遠(yuǎn)不要用在用戶提交的內(nèi)容上。

v-pre指令

跳過其所在節(jié)點(diǎn)的編譯過程，與 v-cloak的功能相反
可利用它跳過：沒有使用指令語法、沒有使用插值語法的節(jié)點(diǎn)，會(huì)加快編譯速度

自定義指令

在 Vue 中，除了內(nèi)置指令 (v-model, v-show, v-else 等) 外，也可以自定義指令。自定義指令的語法和使用方式如下：

1.全局自定義指令：

Vue.directive('directiveName', {bind: function (el, binding, vnode, oldVnode) {// 這里寫你的代碼，比如操作 DOM},// 同樣，你可以提供其他的鉤子函數(shù)，如 inserted, update, componentUpdated, unbind 等
});// 使用時(shí)，在元素上添加 v-directiveName

2.局部自定義指令 (在某個(gè) Vue 實(shí)例或組件中定義)：

new Vue({el: '#app',directives: {'directiveName': {bind: function (el, binding, vnode, oldVnode) {// 這里寫你的代碼，比如操作 DOM},// 同樣，你可以提供其他的鉤子函數(shù)，如 inserted, update, componentUpdated, unbind 等}}
});

自定義指令提供了幾個(gè)鉤子函數(shù)如 bind、inserted、update、componentUpdated 和 unbind，它們的意義如下：

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用。
update：所在組件的 VNode 更新時(shí)調(diào)用。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

這些鉤子函數(shù)的參數(shù)如下：

el: 指令所綁定的元素，可以用來直接操作 DOM 。
binding: 一個(gè)對象，包含以下屬性：
- name：指令名，不包括 v- 前綴，指令名如果是多個(gè)單詞，要使用kebab-case命名，不要使用camelCase命名。
- value：指令的綁定值，例如：v-directiveName=“1 + 1”，value 的值是 2。
- oldValue：指令綁定前的值。
- expression：字符串形式的指令表達(dá)式。
- arg：傳給指令的參數(shù)。
- modifiers：一個(gè)包含修飾符的對象。
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。
oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

React和Vue中key的作用與原理

虛擬dom中key的作用：
key是虛擬dom對象的標(biāo)識，當(dāng)數(shù)據(jù)發(fā)生變化時(shí) Vue會(huì)根據(jù)【新數(shù)據(jù)】生成【新的虛擬DOM】，隨后Vue進(jìn)行【新虛擬DOM】與【舊虛擬DOM】的差異比較。
對比規(guī)則：
1. 舊虛擬dom中找到了與新虛擬dom相同的key——若虛擬dom中內(nèi)容沒變，直接使用之前的真實(shí)dom；若虛擬dom中內(nèi)容變了，則生成新的真實(shí)dom，隨后替換掉頁面中之前的真實(shí)dom。
2. 舊虛擬dom中未找到與新虛擬dom相同的key——?jiǎng)?chuàng)建新的真實(shí)dom，隨后渲染到頁面。
用index作為key可能會(huì)引發(fā)的問題：
1. 若對數(shù)據(jù)進(jìn)行逆序添加，逆序刪除等破壞順序操作：會(huì)產(chǎn)生沒有必要的真實(shí)dom更新===> 界面效果沒有問題，但效率低。
2. 如果結(jié)構(gòu)中還包含了輸入類的dom：會(huì)產(chǎn)生錯(cuò)誤dom更新===>界面有問題。
并發(fā)中如何選擇key？
1. 最好只有每條數(shù)據(jù)的唯一標(biāo)識作為key，比如id、手機(jī)號等。
2. 如果不存在對數(shù)據(jù)的逆序添加，逆序刪除等破壞順序的操作，僅用于渲染列表用于展示，使用index作為key也是沒有問題的。

Vue中的生命周期

在這里插入圖片描述

總結(jié)
1. mounted：發(fā)送ajax請求，啟動(dòng)定時(shí)器，綁定自定義事件、訂閱消息等【初始化操作】。
2. beforeDestory：清除定時(shí)器、解綁自定義事件、取消訂閱消息等【收尾工作】。
3. 銷毀后借助Vue開發(fā)者工具看不到任何消息。
4. 銷毀后自定義事件會(huì)失效，但原生dom事件依然有效。
5. 一般不會(huì)在beforeDestory操作數(shù)據(jù)，因?yàn)榧幢悴僮鲾?shù)據(jù)，也不會(huì)再觸發(fā)更新流程了。

查看全文

http://aloenet.com.cn/news/45053.html

国产亚洲精品福利在线无卡一,国产精久久一区二区三区,亚洲精品无码国模,精品久久久久久无码专区不卡

蘭州吸引用戶的網(wǎng)站設(shè)計(jì)微信推廣引流加精準(zhǔn)客戶

簡介

特點(diǎn)

入門案例

模板語法

數(shù)據(jù)綁定

el與data的兩種寫法

MVVM模型

數(shù)據(jù)代理

事件處理

事件修飾符

鍵盤事件

計(jì)算屬性

監(jiān)視屬性——watch

計(jì)算屬性vs監(jiān)視屬性

Vue監(jiān)視數(shù)據(jù)的原理

綁定樣式

條件渲染

列表渲染

過濾器

v-once指令

v-cloak指令

v-html指令

v-pre指令

自定義指令

React和Vue中key的作用與原理

Vue中的生命周期

相關(guān)文章：