1. 使用 const 与 function 定义函数的区别
使用 export const getSearchKey = () => {} 时,函数不会提升,必须在定义之前调用。
使用 export function getSearchKey = () => {} 时,函数会提升,但函数的赋值不会提升。可以在定义之前调用,但结果是未定义的。
2. 在js文件中定义普通函数与箭头函数的区别
export function dbClick(aaa){} 普通函数中无法正确使用 this ,如果使用 this.xxx,那么 this 指向的将会是window窗口,而不是vue组件,因为如果你需要在函数中使用你vue定义的属性等等都是无效的
export const dbClick = (aaa) => { } 箭头函数不会创建自己的 this ,而是使用其作用域中的this值。因此当你在Vue组件中使用箭头函数时, this 将指向Vue实例 该函数的 this 将指向Vue实例,而不是全局对象(在浏览器中通常是window)
但是当在vue组件内部定义函数时,即使不是箭头函数也会正常指向Vue组件,而不是window
3. 除了必须使用箭头函数定义js文件中的函数的情况,还有一种情况 this 即使在普通函数中也能正确指向vue组件,
例如:
export function handlerExpand(m) {
this.$emit("handlerExpand", m);
}
除了上面的this.$emit方法即使不定义箭头函数,this作用域也只指向vue之外,以下三个方法也是能正常指向vue组件,而不是window:
1.this.$nextTick: 这个方法是Vue实例提供的一个用于异步更新DOM的方法。它允许你在DOM更新后再执行一些操作,并且this会正确地指向Vue实例。
2.this.$refs: 这个属性是Vue实例提供的一个用于访问子组件的方法。通过使用this.$refs,你可以访问子组件实例并调用其中的方法或访问其属性,而this会正确地指向Vue实例。
3.this.$store: 这个属性是Vuex实例提供的一个用于访问应用程序状态的方法。通过使用this.$store,你可以访问Vuex存储中的状态并调用其中的getter或commit方法,而this会正确地指向Vue实例。