Vue 中 this 的理解和使用
Vue 中 this 的理解和使用
·
如果是vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法。
vue中的methods和computed和watch他们都是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即this
函数定义方式 | this指向 | 说明 |
普通函数 () {} | vue实例 | 普通函数的this指向的是它的调用者 |
箭头函数 () => {} | windows | 箭头函数中的this指向的是外部函数的this指向 |
两个重要的小原则:
1.所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象。
样例
methods: {
a: function() {
console.log(this) // vm
return
},
b: () => {
console.log(this) // windows
return
}
}
定时器用箭头函数普通函数
箭头函数this等于父级函数this指向,下面的定时器必须用箭头函数,不能用普通函数。
因为普通函数的this是谁调用就指向谁,而定时器到时调用不是vue调用的,而是js引擎调用的,所以这里写普通函数会指向window。而箭头函数没有自己的this,它是在定义的时候(不用调用就知道this指向谁了)就等于父级函数this指向,这里的父级就是firstName(),是Vue管理的函数,this指向vue实例
<script type="text/javascript">
const vm = new Vue({
el : " #root",
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
//监视属性
watch:{
//简写形式
firstName(val){
//当firstName修改后,1秒后触发计时器修改fullName
//不写成setTimeout(function(){this.fullName = val +'-'+ this.lastName},1000);
setTimeout(()=>{
this.fullName = val +'-'+ this.lastName
},1000);
}
}
})
<script>
更多推荐
已为社区贡献4条内容
所有评论(0)