快捷導(dǎo)航

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的缺點：

由于大量使用with語句會導(dǎo)致性能下降，同時也會給調(diào)試代碼造成困難，因此在開發(fā)大型應(yīng)用程序時，不建議使用with語句

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Element plus實現(xiàn)圖片手動上傳與回顯的過程
近期,發(fā)現(xiàn)點擊修改,element ui 的圖片沒有回顯到框中,所以本文給大家介紹了Element plus實現(xiàn)圖片手動上傳與回顯的過程,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下
2024-09-09
Vue指令指令大全
本文為大家介紹了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-once
2019-02-02
elementUi 中table表尾插入行的實例
這篇文章主要介紹了elementUi 中table表尾插入行的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
npm install sentry-cli失敗的問題解決
本文主要介紹了npm install sentry-cli失敗的問題解決,文章首先描述了問題現(xiàn)象,然后分析了問題的原因,具有一定的參考價值,感興趣的可以了解一下
2023-08-08
vue eslint簡要配置教程詳解
這篇文章主要介紹了vue eslint簡要配置,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-07-07
如何修改ant?design組件自帶樣式
這篇文章主要介紹了如何修改ant?design組件自帶樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue打開新窗口并實現(xiàn)傳參的圖文實例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實現(xiàn)傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
element?tab標(biāo)簽管理路由頁面的項目實踐
本文主要介紹了element?tab標(biāo)簽管理路由頁面的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue3自定義hooks/可組合函數(shù)方式
這篇文章主要介紹了vue3自定義hooks/可組合函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vuex實現(xiàn)登錄狀態(tài)的存儲,未登錄狀態(tài)不允許瀏覽的方法
下面小編就為大家分享一篇vuex實現(xiàn)登錄狀態(tài)的存儲,未登錄狀態(tài)不允許瀏覽的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03