前端基础ES6的更新

---

一、let 与var

let 与var的另一个重要的区别，就是let声明的变量不会在作用域中被提升。
// name会被提升
console.log ( name) ; // undefined
var name = 'Matt ';
// age不会被提升
console.log ( age) ; // ReferenceError: age没有定义
let age = 26;
/**
声明风格及最佳实践:
1.不使用var
有了let和 const，大多数开发者会发现自己不再需要var 了。限制自己只使用let和 const有助于提升代码质量，因为变量有了明确的作用域、声明位置，以及不变的值。
2.const优先，let次之
使用const声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。因此，很多开发者认为应该优先使用const 来声明变量，只在提前知道未来会有修改时，再使用let。这样可以让开发者更有信心地推断某些变量的值永远不会变，同时也能迅速发现因意外赋值导致的非预期行为。
**/

二、this.$router和this.$route的区别

// this.$router 路由的操作阶段, 路由跳转
// 语法:
// 两种传参数形式, params和query
this.$router.push({
    path: ‘路径’, 
    name: ‘路由名称’, 
    params: ‘对象,传递的参数’, 
    query: ‘对象,传递的参数’
})
this.$router.go() // 数值或对象,即前进或后退.负数后退,整数前进,赋值操作一目了然.

// this.$route路由的获取阶段, 单个路由,语法:
// 两种传参数形式, params和query
// this.$route.[path | name | params | query]
// eg: this.$route.path ⇒ ‘路径’

三、vue里this.$refs几种用法

//1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素  　　
//2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
//3、如何利用 v-for 和 ref 获取一组数组或者dom节点
// 注意：  　　
//1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
// 2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
<div id="app">
    <input type="text" ref="refContent" />
    <button @click="add">添加</button>
</div>
<script>
  const app = new Vue({
      el:'#app',
      methods:{
        add:function(){
          console.log(this.$refs);
          this.$refs.refContent.value = "test"; // 有效减少获取dom节点的性能消耗
        }
      },
    data:{
        people:['孙悟空','如来佛','唐三藏'] 
    },          
    created:function() { 
        this. $nextTick(
            () => { 
                console.log(this.$refs.refContent) 
            }) 
    },
 });           
</script>