Vue js with语句原理及用法解析
vue源码中编译部分有下面一段代码，里面用到了with：
exportfunctiongenerate(
ast:ASTElement|void,
options:CompilerOptions
):CodegenResult{
conststate=newCodegenState(options)
constcode=ast?genElement(ast,state):'_c("div")'
return{
render:`with(this){return$[code]}`,
staticRenderFns:state.staticRenderFns
}
}
下面详细解释一下with的用法：
js中我们常用的一种类型是对象：
letobj={
a:"aa",
b:"bb",
c:"cc"
}
而提到对象，我们要获取它中的属性值，可以使用如下方法：
//一： leta=obj.a //二： letb=ojb["b"]
取出对象中的每一个属性值，我们都需要obj....，这样无形中会输入很多次obj，那么我们如何简单的获取到它的属性值呢。
1、常规的方法：
vara=obj.a;
varb=obj.b;
varc=obj.c;
2、使用with后的方法：
with(obj){
vara=a;
varb=b;
varc=c;
}
这里with括号中的值就是我们的公共对象，下面就是每个对象中的值
varqs1=location.search.substring(1);
varhostname1=location.hostname;
varurl1=location.href;
//上面几行代码都包含了location对象，可使用with语句简写为以下形式
with(location){
varqs2=search.substring(1);
varhostname2=hostname;
varurl2=href;
}
只要无疑会大大提高我们的效率。
但是凡事都有利弊，我们也不得不提提with的缺点：
由于大量使用with语句会导致性能下降，同时也会给调试代码造成困难，因此在开发大型应用程序时，不建议使用with语句
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。