Vue js with语句原理及用法解析


Posted in Javascript onSeptember 03, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
分析JS中this引发的bug
Dec 12 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
Vue通过provide inject实现组件通信
Sep 03 #Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 #Javascript
Vue父组件监听子组件生命周期
Sep 03 #Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 #Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 #Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 #Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 #Javascript
You might like
用Socket发送电子邮件
2006/10/09 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
小程序实现多列选择器
2019/02/15 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
竞聘演讲稿
2014/04/24 职场文书
有关环保的标语
2014/06/13 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
学生安全责任协议书
2016/03/22 职场文书