有没有碰到过这样的情况？当你用Vue.js编程时，突然弹出个”TypeError:找不到$XXX属性”的错误提示框？这其实和你在组件中乱调属性有关。原因可能是在组件方法中，有点儿搞不清楚this到底指谁了，所以就找不着正确的属性！别担心，我来给你支招，让你的Vue.js编程更顺手！
理解错误的原因
告诉你个事儿，我们在写Vue.js代码时老要找this这个家伙来获取组件中的方法和数据。但有时候，像在回调函数或异步操作这些地方，这个符号会让人有点摸不清头脑，甚至可能弄错了它指向的对象。这主要是因为平时咱们写普通函数时，对this的含义还不是很清楚，得多实践几次才行。
export default {
data() {
return {};
},
methods: {
handleClick() {
// do something
},
},
};
使用箭头函数避免this指向问题
你听过ES6的箭头函数吗？好神奇，就在定义处就能控制行为。比如，用在Vue组件就是，`this`马上就指到这个组件，不再担心找不到。真的超方便！
export default {
data() {
return {};
},
methods: {
handleClick() {
// do something
},
},
};
利用bind方法固定this指向
哈喽，就这么跟你说，JavaScript里有个叫bind的小魔法，它可以让我们创建出一个全新的函数。不管你什么时候用这个函数，它里面的’this’都会跟着bind的第一个参数跑。明白了吗？就连Vue.js在初始化组件时都需要用到这个方法来找真身的’this’！虽然有点儿绕，但是能解决问题就行。
使用vue-class-component库
哎呦你晓得不？Vue-class-component就是个超级助手，帮我们开心地用类写vue组件。这么一来，组件的结构啊行为啊统统不是问题，还有那个让人头疼的’this’变量也不用担心。刚入门的小伙伴可能会觉得有点难，但要是你在搞大项目或者喜欢干净利落的代码，那我真心建议你试试看这个神奇的工具！
小心异步操作中的this指向
记住在使用setTimeout和Promise搞异步时得留心”this”找不到。别慌，你可以试下用箭头函数搞定它，或者先把”this”绑稳了再来搞异步任务！
正确处理生命周期钩子
在用Vue这些组件时候，”this”可别弄错了！避免搞乱方法和数据的话，尽量试试用箭头函数或明确设置一个固定的”this”啰！
export default {
data() {
return {};
},
methods: {
handleClick: () => {
// do something
},
},
};
避免在全局作用域中定义方法
小伙伴们注意了全局方法跟组件其实没什么太大关系！要是在组件里用了全局方法可得打起十二分精神。那阵子的this可就跑到全局对象那儿去了，不是你的组件，可能会搞得你晕头转向哟。有没有什么好办法解决这事儿？当然有，咱们试试箭头函数或者bind方法！
使用Vue的工具和插件
听过Vue.js里的神奇小助手没？像vue-devtools和vue-router，真是省心神器！直接在浏览器就能看Vue组件状态，解决问题超方便！
export default {
data() {
return {};
},
methods: {
handleClick() {
// do something
},
},
mounted() {
const handleClick = this.handleClick.bind(this);
document.body.addEventListener('click', handleClick);
},
};
持续学习和实践
Vue.js升级速度飞快！新功能不断，得赶紧学起来。学会了就得去用，这样才能提升实力。赶紧上官网逛逛，和大家分享经验，亲自试试那些神奇功能，你会明白”this”到底是啥！
import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class App extends Vue {
handleClick() {
// do something
}
}
评论0