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
 }
}

下面詳細解釋一下with的用法：

js中我們常用的一種型別是物件：

let obj = {
  a:"aa",b:"bb",c:"cc"
}

而提到物件，我們要獲取它中的屬性值，可以使用如下方法：

// 一：
let a = obj.a
//二：
let b = ojb["b"]

取出物件中的每一個屬性值，我們都需要obj....，這樣無形中會輸入很多次obj，那麼我們如何簡單的獲取到它的屬性值呢。

1、常規的方法：

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語句會導致效能下降，同時也會給除錯程式碼造成困難，因此在開發大型應用程式時，不建議使用with語句

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。