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

更新时间：2020年09月03日 11:20:28 作者：vickylinj

这篇文章主要介绍了Vue js with语句原理及用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3获取DOM节点的3种方式实例
Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们非要拿到DOM操作DOM怎么办,下面这篇文章主要给大家介绍了关于Vue3获取DOM节点的3种方式,需要的朋友可以参考下
2023-02-02
vue-cli或vue项目利用HBuilder打包成移动端app操作
这篇文章主要介绍了vue-cli或vue项目利用HBuilder打包成移动端app操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue子组件关闭后调用刷新父组件的实现
这篇文章主要介绍了Vue子组件关闭后调用刷新父组件的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Element UI Upload 组件上传图片可删除、预览功能
这篇文章主要介绍了Element UI Upload 组件上传图片可删除、预览，设置只允许上传单张 / 多张图片的操作,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-11-11
谈谈VUE种methods watch和compute的区别和联系
本篇文章主要介绍了谈谈VUE种methods watch和compute的区别和联系，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
Vue实现指令式动态追加小球动画组件的步骤
这篇文章主要介绍了Vue实现指令式动态追加小球动画组件的步骤，帮助大家更好的理解和实用vue，感兴趣的朋友可以了解下
2020-12-12
vue项目中使用qrcodesjs2生成二维码简单示例
最近项目中需生成二维码,发现了很好用的插件qrcodesjs2,所以下面这篇文章主要给大家介绍了关于vue项目中使用qrcodesjs2生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
Vue中的常用指令及用法总结
在本篇文章里小编给大家整理的是一篇关于Vue中的常用指令及用法总结内容，对此有兴趣的朋友们可以跟着学习下。
2022-01-01
使用Vue CLI配置代码压缩、加密和混淆功能示例代码
这篇文章主要介绍了使用Vue CLI配置代码压缩、加密和混淆功能,通过配置 vue.config.js 文件，我们可以使用 Vue CLI 轻松实现对 Vue 应用程序代码的压缩、加密和混淆，需要的朋友可以参考下
2023-06-06
vue中this.$createElement方法的使用
这篇文章主要介绍了vue中this.$createElement方法的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07