console.log(this.text); // ERROR! this is undefined } } 简单粗暴的做法就是不要在 Vue 组件里用箭头函数。这样会替你省掉不少麻烦和困惑。 既然this是罪魁祸首,箭头函数只是背锅侠,那有时候还是可以用箭头函数的,只要你没有用到this: computed: { location: () => window.location, } 现在我们知道了...
当我们在常规函数或简写函数中使用箭头函数时,常规函数将this设置为我们的Vue组件,而箭头函数则不一样。 来个例子: data() {return{match:'This is a message', }; },computed: {filteredMessages(messages) {console.log(this);// VueconstfilteredMessages = messages.filter(// 引用我们的Vue组件(message) ...
在fetchData()作用域内,我们将this设置为Vue组件,因为它是一个常规函数。由于箭头函数使用外部作用域作为它们自己的作用域,因此箭头函数也将this设置为我们的Vue组件。 这允许我们通过this访问 Vue 组件并更新dataFromServer。 但是,如果需要将函数传递帮助库,比如lodash或underscore,该怎么办呢 与Lodash 或 Underscore ...
在computed内部计算出的值却无法使用;在data内部进行了检测,发现this是可以检测到的,但是this下的多个属性均为undefined 贴上代码 computed:{ offsetTop:function(){ return (this.$el.offsetWidth-this.$el.offsetHeight)/2+'px'; } }, data:function(){ console.log(this); console.log(this.offsetTop); r...
在像这样的常规函数中,this将引用函数的“所有者”。因为我们是在Vue组件上定义它的,所以this指的是Vue组件。 在大多数情况下,我们应该在 Vue 中使用常规函数,特别是在创建时 methods computed props watched props 虽然常规函数通常是我们所需要的,但是箭头函数也非常方便。
使用vue开发一个小项目的时候,由于模板内的style需要使用计算属性,在computed内部计算出的值却无法使用;在data内部进行了检测,发现this是可以检测到的,但是this下的多个属性均为undefined贴上代码computed:{ offsetTop:function(){ return (this.$el.offsetWidth-this.$el.offsetHeight)/2+'px'; }},data:function(...
console.log(this.text);// ERROR! this is undefined} } 简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。 有时使用箭头函数是很好的,但这只在不引用this的情况下才有效。 computed: { location:()=>window.location, ...
vue:computed第一次计算报错undefined 如果computed属性取得是vuex的值,怎么第一次不报错呢?:初始值怎么才能不报错呢? 多一个判断就可以了:
避免在computed属性中使用this:在computed属性中,this指向的是Vue实例,而不是组件实例。如果需要访问组件实例的属性或方法,可以通过将this保存在一个变量中来解决这个问题。 总之,在Vue中使用this时,需要注意作用域、回调函数、异步操作以及computed属性等方面,以确保正确访问组件实例的属性和方法。
在一个普通函数中,this归属于函数的“拥有者”。由于我们是在vue组件里定义的,那么this归属于vue组件。接下来我将解释this的作用域。 大多数情况下你在vue里最好使用普通函数,特别是当你构建: methods computed props watched props 普通函数通常是你所需要的,而箭头函数用起来更便利。