1.var,const,let的區(qū)別

首先，必須明確let 與const是ES6 中為了修復(fù)var的缺陷引入的，那么var有什么缺陷呢？

var

1.var沒有塊級(jí)作用域

在JS函數(shù)中的var聲明，其作用域是函數(shù)體的全部。

????for(var?i=0;i<10;i++){
??????????var?a?=?'a';
????}
????console.log(a);??
?console.log(l);

2.循環(huán)內(nèi)變量過度共享

for?(var?i?=?0;?i?3;?i++)?{
????setTimeout(function?()?{
????????console.log(i)
????},?1000);
}

循環(huán)本身及三次 timeout 回調(diào)均共享唯一的變量 i。當(dāng)循環(huán)結(jié)束執(zhí)行時(shí)，i的值為3。所以當(dāng)?shù)谝粋€(gè) timeout 執(zhí)行時(shí)，調(diào)用的 i 當(dāng)讓也為 3 了。

因此，let與const就是來解決這些問題的。

let

必須聲明 'use strict' 后才能使用let聲明變量，否則瀏覽并不能顯示結(jié)果

• let聲明的變量擁有塊級(jí)作用域。 也就是說用let聲明的變量的作用域只是外層塊，而不是整個(gè)外層函數(shù)。let 聲明仍然保留了提升特性，但不會(huì)盲目提升，在示例一中，通過將var替換為let可以快速修復(fù)問題，如果你處處使用let進(jìn)行聲明，就不會(huì)遇到類似的bug。
• let聲明的全局變量不是全局對(duì)象的屬性。這就意味著，你不可以通過window.變量名的方式訪問這些變量。它們只存在于一個(gè)不可見的塊的作用域中，這個(gè)塊理論上是Web頁面中運(yùn)行的所有JS代碼的外層塊。
• 形如for (let x...)的循環(huán)在每次迭代時(shí)都為x創(chuàng)建新的綁定。這是一個(gè)非常微妙的區(qū)別，拿示例二來說，如果一個(gè)for (let...)循環(huán)執(zhí)行多次并且循環(huán)保持了一個(gè)閉包，那么每個(gè)閉包將捕捉一個(gè)循環(huán)變量的不同值作為副本，而不是所有閉包都捕捉循環(huán)變量的同一個(gè)值。所以示例二中，也以通過將var替換為let修復(fù)bug。這種情況適用于現(xiàn)有的三種循環(huán)方式：for-of、for-in、以及傳統(tǒng)的用分號(hào)分隔的類C循環(huán)。
• 用let重定義變量會(huì)拋出一個(gè)語法錯(cuò)誤(SyntaxError)。這個(gè)很好理解，用代碼說話

let?a?=?'a';
let?a?=?'b';

const

作用：用來定義常量，不允許重復(fù)聲明

還有一篇帖子可以看看：https://juejin.im/post/6844903704189992973

作者：麻辣小隔壁 鏈接：https://www.jianshu.com/p/4e9cd99ecbf5 來源：簡書 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

2.編程范式：聲明式與命令式

命令式編程(Imperative)：詳細(xì)的命令機(jī)器怎么(How)去處理一件事情以達(dá)到你想要的結(jié)果(What)。

命令式編程更加的精細(xì)化，更嚴(yán)謹(jǐn)，程序也會(huì)一是不夠的執(zhí)行你的命令。

如普通的C語言算法等等。。

聲明式編程( Declarative)：只告訴你想要的結(jié)果(What)，機(jī)器自己摸索過程(How)

聲明式編程能在特定的更高層面代碼領(lǐng)域是給我們帶來效率的提升，程序員只需要對(duì)想要的結(jié)果(What)進(jìn)行深思熟慮，程序會(huì)自動(dòng)的解決過程(How)。當(dāng)然代碼看起來更簡潔也是大大的滿足了眾多強(qiáng)迫癥程序猿。

如SQL的語句使用。。

引用：https://zhuanlan.zhihu.com/p/34445114

3.語法糖

之所以叫「語法」糖(Syntactic sugar)，不只是因?yàn)榧犹呛蟮拇a功能與加糖前保持一致，更重要的是，「糖在不改變其所在位置的語法結(jié)構(gòu)的前提下，實(shí)現(xiàn)了運(yùn)行時(shí)等價(jià)」。

4.MVVM(「Model–view–viewmodel」)

將頁面分為Model ，ViewModel與View三層，Model指?jìng)魅胝故净蛘咛幚淼募償?shù)據(jù)部分，View指HTML等純展示的部分，ViewModel指像Vue這種紐帶,ViewModel層通過「雙向數(shù)據(jù)綁定」將View層和Model層連接了起來，使得View層和Model層的同步工作完全是自動(dòng)的,因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，無需手動(dòng)操作DOM。

View層：視圖層

在我們前端開發(fā)中，通常就是DOM層。

主要的作用是給用戶展示各種信息。

Model層：數(shù)據(jù)層

數(shù)據(jù)可能是我們固定的死數(shù)據(jù)，更多的是來自我們服務(wù)器，從網(wǎng)絡(luò)上請(qǐng)求下來的數(shù)據(jù)。

在我們計(jì)數(shù)器的案例中，就是后面抽取出來的obj，當(dāng)然，里面的數(shù)據(jù)可能沒有這么簡單。

VueModel層：視圖模型層

視圖模型層是View和Model溝通的橋梁。

一方面它實(shí)現(xiàn)了Data Binding，也就是數(shù)據(jù)綁定，將Model的改變實(shí)時(shí)的反應(yīng)到View中

另一方面它實(shí)現(xiàn)了DOM Listener，也就是DOM監(jiān)聽，當(dāng)DOM發(fā)生一些事件(點(diǎn)擊、滾動(dòng)、touch等)時(shí)，可以監(jiān)聽到，并在需要的情況下改變對(duì)應(yīng)的Data。

5.Vue傳入的Options

詳情查閱API

6.方法與函數(shù)區(qū)別

(1)語義上：

方法：method

函數(shù): function

(2)具體表現(xiàn)：

method與具體的實(shí)例掛鉤，常是實(shí)例中實(shí)現(xiàn)的方法;function則無需與實(shí)例掛鉤，常置于類外即可

7.Vue生命周期

8.Debug和Release的區(qū)別

Debug：調(diào)試版本，包含調(diào)試信息，所以容量比Release大很多，并且不進(jìn)行任何優(yōu)化(優(yōu)化會(huì)使調(diào)試復(fù)雜化，因?yàn)樵创a和生成的指令間關(guān)系會(huì)更復(fù)雜)，便于程序員調(diào)試。「Debug模式下生成兩個(gè)文件，除了.exe或.dll文件外，還有一個(gè).pdb文件，該文件記錄了代碼中斷點(diǎn)等調(diào)試信息」

Release：發(fā)布版本，不對(duì)源代碼進(jìn)行調(diào)試，編譯時(shí)對(duì)應(yīng)用程序的速度進(jìn)行優(yōu)化，使得程序在代碼大小和運(yùn)行速度上都是最優(yōu)的。(調(diào)試信息可在單獨(dú)的PDB文件中生成)。「Release模式下生成一個(gè)文件.exe或.dll文件」

9.mustache語法

• {{data}}
• {{#data}} {{/data}}
• {{^data}} {{/data}}
• {{.}}
• {{>partials}}
• {{{data}}}
• {{!comments}}

看完文章后感覺不會(huì)多用，就不詳細(xì)寫了，文章：https://blog.csdn.net/qq_27954643/article/details/82463629

10.v-元素列舉

• v-once:展示一次
• v-html:直接渲染HTML
• v-text:源碼直出
• v-pre:阻止預(yù)編譯
• v-cloak:在標(biāo)簽中加入一個(gè)v-cloak自定義屬性，在HTML還編譯完成之后該屬性會(huì)被刪除

11.v-bind

1. 綁定對(duì)象

<h2?class="title"?:class="{'active':?isActive,?'line':?isLine}">Hello?Worldh2>

注意：title可與active,line共存

用法：通過isActive與isLine的true/false確定

2. 綁定數(shù)組

<h2?class="title"?:class=“['active',?'line']">Hello?Worldh2>

一樣的，可以用數(shù)組

把a(bǔ)ctive作為對(duì)象，可以放更多屬性

12.computed詳解

setter與getter

在使用computed屬性時(shí)，常默認(rèn)操作的屬性為只讀屬性，即只有g(shù)etter，常如下操作：

computed:function(){
????return?...;
}

實(shí)際上，computed是一個(gè)對(duì)象，具有g(shù)etter與setter屬性，可以如下操作：

?computed:?{
????fullName:?{
??????//getter?方法
????????get(){
???
????????}，
???//setter?方法
????????set(newValue){
?????????
????????}
??????
????}
??},
????updated?()?{
????????console.log('updated')
??}

修改值時(shí)，順序?yàn)閟etter -> getter -> updated

作者：littleTank鏈接：https://www.jianshu.com/p/56f337688d6b 來源：簡書 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

methods與computed比較

處理時(shí)，可以將同一函數(shù)定義為一個(gè) method 或者一個(gè)計(jì)算屬性。對(duì)于最終的結(jié)果，兩種方式確實(shí)是相同的。

不同的是 computed 計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性 computed 「只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值」。這就意味著只要 message ?還沒有發(fā)生改變，多次訪問 ?reversedMessage ?計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。而對(duì)于method ，只要發(fā)生重新渲染，method ?調(diào)用總會(huì)執(zhí)行該函數(shù)。

當(dāng)有一個(gè)性能開銷比較大的的計(jì)算屬性 A ，它需要遍歷一個(gè)極大的數(shù)組和做大量的計(jì)算就需要用 computed 來緩存。

13.閉包與作用域

閉包：

閉包是函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合。----MDN

閉包的特性

1. 函數(shù)嵌套函數(shù)
2. 內(nèi)部函數(shù)可以訪問外部作用域(或外部函數(shù))的變量和參數(shù)
3. 參數(shù)和變量不會(huì)被回收機(jī)制回收，一直存在于內(nèi)存中，除非手動(dòng)清除

為什么要用閉包

1. 希望變量長期存在內(nèi)存中
2. 避免全局變量污染

作用域：

作用域是一個(gè)變量和函數(shù)的作用范圍，JS中函數(shù)內(nèi)聲明的所有變量在函數(shù)體內(nèi)始終是可見的，在ES6前有全局作用域和局部作用域，但是沒有塊級(jí)作用域(catch只在其內(nèi)部生效)，局部變量的優(yōu)先級(jí)高于全局變量。

值得注意的是與var被let與const取代聯(lián)系來看，就是因?yàn)関ar聲明的對(duì)象沒有塊級(jí)作用域

注：稍作研究之后發(fā)現(xiàn)這個(gè)這個(gè)問題十分深入，后續(xù)會(huì)出相關(guān)文章

14.const注意點(diǎn)

const永遠(yuǎn)的神

1. 在全局環(huán)境，不應(yīng)該設(shè)置變量，只應(yīng)設(shè)置常量。可能你有顧慮是我真的想讓一個(gè)量被修改，又真的想讓它在全局環(huán)境，怎么辦？這種情況下，可以用這種方式：

const?globelConst?=?{a:?1,?b:?2};?//?a和b的值確實(shí)是可以改變的，原因見下文

2. 在局部環(huán)境，也應(yīng)該優(yōu)先考慮使用const，除非它真的需要改變值，那么就用let。

注意：

1. const定義的標(biāo)識(shí)符必須初始化
2. const修飾的標(biāo)識(shí)符不能被修改
3. 常量的含義是指向的對(duì)象不能改變，對(duì)象的內(nèi)部的屬性可以被改變,就像頭指針一樣

作者：microkof 鏈接：https://www.jianshu.com/p/a234a1078cf2 來源：簡書 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

15.字面量

夠明白了

16.函數(shù)增強(qiáng)寫法

?const?obj?=?new?Object()
????const?obj?=?{
?????name:'tbw',
?????age:19,
?????run:function(){
??????console.log("在奔跑！！！")
?????},
?????eat:function(){
??????console.log("在吃東西")
?????}
????}
???//屬性的增強(qiáng)寫法
???const?name?=?'tbw'
???const?age?=?19;
???const?height?=?1.85
???//ES5寫法!
????const?Obj?=?{
?????name:name,
?????age:age,
?????height:height
????}
???ES6寫法?屬性的增強(qiáng)寫法
????const?obj?=?{
?????name,
????age,
????height,
???}
???//ES6寫法?函數(shù)的增強(qiáng)寫法
???const?obj?=?{
????run(){
?????
????},
????eat(){
?????
????}
???}
??console.log(obj)

參考：https://blog.csdn.net/weixin_45567242/article/details/103386859

17.v-show與v-if對(duì)比

• v-show:不管條件是真還是假，第一次渲染的時(shí)候都會(huì)編譯出來，也就是標(biāo)簽都會(huì)添加到DOM中。之后切換的時(shí)候，通過display: none;樣式來顯示隱藏元素。可以說只是改變css的樣式，幾乎不會(huì)影響什么性能。

• v-if:在首次渲染的時(shí)候，如果條件為假，什么也不操作，頁面當(dāng)作沒有這些元素。當(dāng)條件為真的時(shí)候，開始局部編譯，動(dòng)態(tài)的向DOM元素里面添加元素。當(dāng)條件從真變?yōu)榧俚臅r(shí)候，開始局部編譯，卸載這些元素，也就是刪除。

綜上：因?yàn)関-show無論如何都會(huì)渲染，如果在一些場(chǎng)景下很難出現(xiàn)，那么使用v-if。如果是一些固定的，條件內(nèi)容都不怎么會(huì)改變的，頻繁切換的，使用v-show會(huì)比較省性能。如果是子組件，每次切換子組件不執(zhí)行生命周期，使用v-show，如果子組件需要重新執(zhí)行生命周期，那么使用v-if才能觸發(fā)。

作者：wade3po 鏈接：https://juejin.im/post/6844903767553359885 來源：掘金 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

18.diff算法

vue中的diff算法作用是比較雙向綁定的對(duì)象之間是否變化，主要涉及樹類型的數(shù)據(jù)結(jié)構(gòu)中比較兩顆樹是否一致，看這篇文章就夠了。

作者：duffy39262 鏈接：https://juejin.im/post/6844903592483094535

19.key的作用

• v-for遍歷時(shí)，用id，uuid之類作為key，唯一標(biāo)識(shí)節(jié)點(diǎn)加速虛擬DOM渲染
• 響應(yīng)式系統(tǒng)沒有監(jiān)聽到的數(shù)據(jù)，用+new Date()生成的時(shí)間戳作為key，手動(dòng)強(qiáng)制觸發(fā)重新渲染

可以看看https://www.zhihu.com/question/61064119中方應(yīng)杭的回答

20.v-for中的響應(yīng)式操作

倘若是像如下賦值則無效：item[0]=test

總結(jié)

以上是生活随笔為你收集整理的vue 怎么全局到入常量_午后躺椅上看关于Vue的20点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。