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語句