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禁止页面操作的示例代码
Dec 17 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
js的touch事件的实际引用
Oct 13 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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 无限极分类
2008/03/27 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
2017/07/06 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
Python验证企业工商注册码
2015/10/25 Python
深入浅析Python的类
2018/06/22 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
电子信息科学专业自荐信
2014/01/30 职场文书
技术合作协议书范本
2014/04/18 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
民间借贷协议书范本
2014/10/01 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
个人收入证明范本
2015/06/12 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python