- 使用npm下载ladash依赖后,引入lodash
import _ from 'lodash'
- 页面代码:
<div class="search">
<input type="text" v-model="condition" placeholder="搜索社区" v-on:input="lodashSearch">
</div>
- methods方法:
//实时检索
lodashSearch: _.debounce(() => {
this.getSearchCommunity(); // 添加debounce,防止页面卡死
}, 400),
报错:this.this.getSearchCommunity is not a function
打印this为undefined
后面不使用箭头函数,则程序正常,不报错
lodashSearch: _.debounce(function(){
console.log(this); //vue实例对象
this.getSearchCommunity(); // 添加debounce,防止页面卡死
}, 500),
但是我之前使用lodash做resize事件监听时,使用的是箭头函数,然后程序正常啊,
代码如下:
mounted: function () {
let _ = require('lodash');
window.onresize = _.debounce(() => {
this.initPage(); // 添加debounce,防止页面卡死
}, 400);
},
为什么在 mounted 和 methods 里效果不一样呢?
- 原因如下:
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。
示例:
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
},
do(){
this.a--;
}
}
})
vm.plus()
vm.a // 2