Vue js with語句原理及用法解析
更新時間：2020年09月03日 11:20:28 作者：vickylinj
這篇文章主要介紹了Vue js with語句原理及用法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
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中我們常用的一種類型是對象：
let obj = {
a:"aa",
b:"bb",
c:"cc"
}
而提到對象，我們要獲取它中的屬性值，可以使用如下方法：
// 一： let a = obj.a //二： let b = ojb["b"]
取出對象中的每一個屬性值，我們都需要obj....，這樣無形中會輸入很多次obj，那么我們?nèi)绾魏唵蔚墨@取到它的屬性值呢。
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括號中的值就是我們的公共對象，下面就是每個對象中的值
var qs1 = location.search.substring(1);
var hostname1 = location.hostname;
var url1 = location.href;
// 上面幾行代碼都包含了location對象，可使用with語句簡寫為以下形式
with(location){
var qs2 = search.substring(1);
var hostname2 = hostname;
var url2 = href;
}
只要無疑會大大提高我們的效率。
但是凡事都有利弊，我們也不得不提提with的缺點(diǎn)：
由于大量使用with語句會導(dǎo)致性能下降，同時也會給調(diào)試代碼造成困難，因此在開發(fā)大型應(yīng)用程序時，不建議使用with語句
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Element plus實(shí)現(xiàn)圖片手動上傳與回顯的過程
近期,發(fā)現(xiàn)點(diǎn)擊修改,element ui 的圖片沒有回顯到框中,所以本文給大家介紹了Element plus實(shí)現(xiàn)圖片手動上傳與回顯的過程,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下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í)例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本文主要介紹了npm install sentry-cli失敗的問題解決,文章首先描述了問題現(xiàn)象,然后分析了問題的原因,具有一定的參考價值,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了vue eslint簡要配置,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了如何修改ant?design組件自帶樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐
本文主要介紹了element?tab標(biāo)簽管理路由頁面的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vuex實(shí)現(xiàn)登錄狀態(tài)的存儲,未登錄狀態(tài)不允許瀏覽的方法
下面小編就為大家分享一篇vuex實(shí)現(xiàn)登錄狀態(tài)的存儲,未登錄狀態(tài)不允許瀏覽的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03