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 chosen动态设置值实例介绍
Aug 08 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
AngularJS表单基本操作
Jan 09 Javascript
vue跨域解决方法
Oct 15 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
JavaScript实现班级抽签小程序
May 19 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
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
PHP二维数组去重实例分析
2016/11/18 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
PyQt5 多窗口连接实例
2019/06/19 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
极简的HTML5模版
2015/07/09 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
商场活动策划方案
2014/01/24 职场文书
爱国演讲稿500字
2014/05/04 职场文书
幼师中班个人总结
2015/02/12 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python