Vue js with語(yǔ)句原理及用法解析
vue源碼中編譯部分有下面一段代碼，里面用到了with：
export function generate (
ast: ASTElement | void,
options: CompilerOptions
): CodegenResult {
const state = new CodegenState(options)
const code = ast ? genElement(ast, state) : '_c("div")'
return {
render: `with(this){return $[code]}`,
staticRenderFns: state.staticRenderFns
}
}
下面詳細(xì)解釋一下with的用法：
js中我們常用的一種類(lèi)型是對(duì)象：
let obj = {
a:"aa",
b:"bb",
c:"cc"
}
而提到對(duì)象，我們要獲取它中的屬性值，可以使用如下方法：
// 一： let a = obj.a //二： let b = ojb["b"]
取出對(duì)象中的每一個(gè)屬性值，我們都需要obj....，這樣無(wú)形中會(huì)輸入很多次obj，那么我們?nèi)绾魏?jiǎn)單的獲取到它的屬性值呢。
1、常規(guī)的方法：
var a = obj.a;
var b = obj.b;
var c = obj.c;
2、使用with后的方法：
with(obj){
var a = a;
var b = b;
var c = c;
}
這里with括號(hào)中的值就是我們的公共對(duì)象，下面就是每個(gè)對(duì)象中的值
var qs1 = location.search.substring(1);
var hostname1 = location.hostname;
var url1 = location.href;
// 上面幾行代碼都包含了location對(duì)象，可使用with語(yǔ)句簡(jiǎn)寫(xiě)為以下形式
with(location){
var qs2 = search.substring(1);
var hostname2 = hostname;
var url2 = href;
}
只要無(wú)疑會(huì)大大提高我們的效率。
但是凡事都有利弊，我們也不得不提提with的缺點(diǎn)：
由于大量使用with語(yǔ)句會(huì)導(dǎo)致性能下降，同時(shí)也會(huì)給調(diào)試代碼造成困難，因此在開(kāi)發(fā)大型應(yīng)用程序時(shí)，不建議使用with語(yǔ)句
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過(guò)程
近期,發(fā)現(xiàn)點(diǎn)擊修改,element ui 的圖片沒(méi)有回顯到框中,所以本文給大家介紹了Element plus實(shí)現(xiàn)圖片手動(dòng)上傳與回顯的過(guò)程,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-09-09
本文為大家介紹了VUE中內(nèi)置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once2019-02-02
這篇文章主要介紹了elementUi 中table表尾插入行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
npm install sentry-cli失敗的問(wèn)題解決
本文主要介紹了npm install sentry-cli失敗的問(wèn)題解決,文章首先描述了問(wèn)題現(xiàn)象,然后分析了問(wèn)題的原因,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了vue eslint簡(jiǎn)要配置,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了如何修改ant?design組件自帶樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue打開(kāi)新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開(kāi)新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐
本文主要介紹了element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vuex實(shí)現(xiàn)登錄狀態(tài)的存儲(chǔ),未登錄狀態(tài)不允許瀏覽的方法
下面小編就為大家分享一篇vuex實(shí)現(xiàn)登錄狀態(tài)的存儲(chǔ),未登錄狀態(tài)不允許瀏覽的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03