Vue js with語句原理及用法解析
更新時(shí)間：2020年09月03日 11:20:28 作者：vickylinj
這篇文章主要介紹了Vue js with語句原理及用法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
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"]
取出對象中的每一個(gè)屬性值，我們都需要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括號中的值就是我們的公共對象，下面就是每個(gè)對象中的值
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)致性能下降，同時(shí)也會給調(diào)試代碼造成困難，因此在開發(fā)大型應(yīng)用程序時(shí)，不建議使用with語句
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
fullcalendar日程管理插件月份切換回調(diào)處理方案
這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03
前端通過vue調(diào)用后端接口導(dǎo)出excel表格基本步驟
在Vue前端項(xiàng)目中,可通過axios庫發(fā)送請求至后端獲取Excel下載鏈接,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-10-10
vue內(nèi)置組件transition簡單原理圖文詳解(小結(jié))
這篇文章主要介紹了vue內(nèi)置組件transition簡單原理圖文詳解(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了VueRouter路由模式的用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue3中如何實(shí)現(xiàn)定義全局變量，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
在vue中使用echarts(折線圖的demo,markline用法)
這篇文章主要介紹了在vue中使用echarts(折線圖的demo,markline用法)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了原理深度解析Vue的響應(yīng)式更新比React快，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue3.0 CLI - 1 - npm 安裝與初始化的入門教程
這篇文章主要介紹了vue3.0 CLI - 1 - npm 安裝與初始化的入門教程,本文通過實(shí)例代碼相結(jié)合的形式，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路
這篇文章主要介紹了Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02