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

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

var

1.var沒有塊級作用域

在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。當循環(huán)結(jié)束執(zhí)行時，i的值為3。所以當?shù)谝粋€ timeout 執(zhí)行時，調(diào)用的 i 當讓也為 3 了。

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

let

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

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

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

const

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

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

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

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

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

命令式編程更加的精細化，更嚴謹，程序也會一是不夠的執(zhí)行你的命令。

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

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

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

如SQL的語句使用。。

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

3.語法糖

之所以叫「語法」糖(Syntactic sugar)，不只是因為加糖后的代碼功能與加糖前保持一致，更重要的是，「糖在不改變其所在位置的語法結(jié)構(gòu)的前提下，實現(xiàn)了運行時等價」。

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

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

View層：視圖層

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

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

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

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

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

VueModel層：視圖模型層

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

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

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

5.Vue傳入的Options

詳情查閱API

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

(1)語義上：

方法：method

函數(shù): function

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

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

7.Vue生命周期

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

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

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

9.mustache語法

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

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

10.v-元素列舉

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

11.v-bind

1. 綁定對象

<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ù)組

把active作為對象，可以放更多屬性

12.computed詳解

setter與getter

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

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

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

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

修改值時，順序為setter -> getter -> updated

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

methods與computed比較

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

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

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

13.閉包與作用域

閉包：

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

閉包的特性

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

為什么要用閉包

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

作用域：

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

值得注意的是與var被let與const取代聯(lián)系來看，就是因為var聲明的對象沒有塊級作用域

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

14.const注意點

const永遠的神

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

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

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

注意：

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

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

15.字面量

夠明白了

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

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

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

17.v-show與v-if對比

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

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

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

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

18.diff算法

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

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

19.key的作用

• v-for遍歷時，用id，uuid之類作為key，唯一標識節(jié)點加速虛擬DOM渲染
• 響應(yīng)式系統(tǒng)沒有監(jiān)聽到的數(shù)據(jù)，用+new Date()生成的時間戳作為key，手動強制觸發(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)容還不錯，歡迎將生活随笔推薦給好友。