一、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. r o u t e r 和 t h i s . router和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>