這篇文章主要介紹在Vue源碼中如何使用With，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

灤平網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,灤平網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為灤平上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的灤平做網(wǎng)站的公司定做！

with用于擴(kuò)展一個語句的作用域鏈，但一般情況下不建議使用with語句，因?yàn)樗赡苁且鸹煜e誤和兼容性問題的根源。在Vue源碼中有使用with語句的功能點(diǎn)，因此在這里將簡介其功能，以助于閱讀框架源碼。

性能的利與弊

利

with語句可以在不造成性能損失的情況下，減少變量的長度。其造成的附加計算量很少。使用'with'可以減少不必要的指針路徑解析運(yùn)算。但是在大部分情況下，即使不使用with，使用臨時變量來保存指針或者使用call，也能達(dá)到同樣的效果。

弊

with語句使得程序在查找變量值時，都是先在指定的對象中查找。所以那些本來不是這個對象的屬性的變量，查找起來將會很慢。

示例

let obj = {
    a: 1,
    b: 2,
    c: 3
}
with(obj){
    console.log(a)    //1
    console.log(b)    //2
    console.log(c)    //3
}

這段代碼中，with關(guān)聯(lián)的obj對象，在with代碼塊中，每個變量都選被認(rèn)為是一個局部變量，如果這個局部變量與obj對象的某個屬性同名，則這個局部變量會指向obj對象屬性。

function fn(obj){
    with(obj){
        a = 1;
    }
}
let obj1 = {
    a: 2
}
let obj2 = {
    b: 3
}

fn(obj1);
console.log(obj1.a)     //1

fn(obj2)
console.log(obj2.a)     //undefined
console.log(a)          //1，變量a被泄漏到全局作用域鏈上

上例中，obj1存在a屬性，obj2沒有a屬性。fn(obj)接收一個obj形參，是一個對象引用，并執(zhí)行了with(obj)。在with代碼塊的內(nèi)部，對a實(shí)際上是一個引用，將1賦值給了a。

當(dāng)傳遞obj2給with時，with所聲明的作用域就是obj2，從這個作用域下開始對a進(jìn)行查詢。obj2的作用域、fn的作用域和全局作用域中都沒有查找到標(biāo)識符a，因此在非嚴(yán)格模式下會自動在全局作用域創(chuàng)建一個全局變量，而嚴(yán)格模式下則會拋出ReferenceError錯誤。

性能降低

如果在代碼中使用了with，那么JS引擎在編譯階段只能簡單地假設(shè)關(guān)于標(biāo)識符的判斷都將無效，因?yàn)榫幾g器也不能知道傳遞給with的作用域?qū)ο蟮降资钦l。因此JS引擎在編譯階段進(jìn)行的性能優(yōu)化都將無效。最糟糕的情況，那就是如果出現(xiàn)了with，所有的優(yōu)化都將變得無意義。最簡單的做法就是不做任何優(yōu)化，那么運(yùn)行起來一定會很慢，這將是無法避免的事實(shí)。

Vue中的with

Vue 在 compile 的時候，會把 template 生成對應(yīng)的 render function，而這個 render function中又正好使用了with語句。按照上文來說，不建議使用with語句，為什么在Vue中又會使用到呢？

function render () {
  with (this) {
    return _c('p',{on:{"click":change}},[_c('span',[_v(_s(number))]),_v(" "),_c('span',     [_v(_s(name))])])
  }
}

因?yàn)閣ith 的作用域和模板的作用域正好契合，可以極大地簡化模板編譯過程。而with的代碼量很少，把作用域的處理交給JS引擎來做也更可靠。當(dāng)然，最理想的情況還是要去掉with的使用，預(yù)編譯的時候會自動把第一遍編譯生成的代碼進(jìn)行一次額外處理，用完整的AST分析來處理作用域，把with拿掉，順便支持ES6語法。換句話說，如果用 webpack + vue 的時候，最終生成的代碼是沒有 with 的。

以上是“在Vue源碼中如何使用With”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：在Vue源碼中如何使用With-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/dsehpg.html