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 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
详解Axios 如何取消已发送的请求
Oct 20 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 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获取后台Job管理的实现代码
2011/06/10 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
详解vue axios中文文档
2017/09/12 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Django多个app urls配置代码实例
2020/11/26 Python
python生成word合同的实例方法
2021/01/12 Python
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
老公保证书范文
2014/04/29 职场文书
公益广告标语
2014/06/19 职场文书
博士生导师推荐信
2014/07/08 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
工程部文员岗位职责
2015/02/04 职场文书
英语教师个人总结
2015/02/09 职场文书
倡议书格式及范文
2015/04/29 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript