ES6中let与var的区别

2018年4月27日16:33:17 发表评论 阅读(2,264)
本文最后更新于2018年6月2日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

1.Vue router 跳转和 href 有什么区别?

router:vue-router就是vue官方提供的一个路由框架。总体来说,vue-router设计得简单好用。<router-link> 组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

2.router-link属性配置

to

这是一个必须设置的属性,否则路由无法生效。它表示路由的链接,可以是一个字符串也可以是一个描述目标位置的对象。

<router-link to="goods"></router-link>
<router-link to="{path='goods'}"></router-link>

replace

一个布尔类型,默认为false。如果replace设置为true,那么导航不会留下history记录,点击浏览器回退按钮不会再回到这个路由。

<router-link to="goods" replace></router-link>

tag

router-link默认渲染成a标签,也有方法让它渲染成其他标签,tag属性就用来设置router-link渲染成什么标签的。

<!-- 渲染成li标签 -->
<router-link to="goods" tag="li"></router-link>

active-class

上面说了被选中的router-link将自动添加一个class属性值.router-link-active,这个属性就是来修改这个class值的。

href:href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。

3.router与href的区别如下:

<router-link> 比起写死的 <a href="..."> 会好一些,理由如下:

  • 无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
  • 在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
  • 当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。

4.ES6中let与var有什么区别?

4.1作用域不同:

  • 通过var定义的变量,作用域是整个封闭函数,是全域的 。通过let定义的变量,作用域是在块级或是子块中。
  1. for (let i = 0; i < 10; i++) {
  2.   // ...
  3. }
  4. console.log(i);
  5. // ReferenceError: i is not defined
  6. //计数器i只在for循环体内有效,在循环体外引用就会报错。

4.2变量提升现象:

浏览器在运行代码之前会进行预解析,首先解析函数声明,定义变量,解析完之后再对函数、变量进行运行、赋值等。
-不论var声明的变量处于当前作用域的第几行,都会提升到作用域的头部。
-var 声明的变量会被提升到作用域的顶部并初始化为undefined,而let声明的变量在作用域的顶部未被初始化

  1. // var 的情况
  2. console.log(foo); // 输出undefined
  3. var foo = 2;
  4. //相当于
  5. var foo;  //声明且初始化为undefined
  6. console.log(foo);
  7. foo=2;
  1. // let 的情况
  2. console.log(bar); // 报错ReferenceError
  3. let bar = 2;
  4. //相当于在第一行先声明bar但没有初始化,直到赋值时才初始化

4.3重复声明同一个变量时,表现不同:

let不允许在相同作用域内,重复声明同一个变量。

  1. let a = 10
  2. let a = 20
  3. console.log(a)
  4. // 语法错误
  5. Uncaught SyntaxError: Identifier 'a' has already been declared

var会输出一个20,一个undefined

  1. var a = 10
  2. var a = 20
  3. console.log(a)
  4. 20
  5. undefined

 

参考资料:https://blog.csdn.net/zuiziyoudexiao/article/details/76890102

https://segmentfault.com/a/1190000007825106

https://router.vuejs.org/zh-cn/api/router-link.html

 

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛