关于Vue中this的问题,我不太理解this为啥可以直接访问到data。

来源:2-4 开发TodoList(v-model、v-for、v-on)

Raymond0913

2020-12-08 21:22:58

# 具体遇到的问题
如代码所示,我看其他提问已经知道this指向的是Vue实例。

我在代码中试了一下,this.$data.inputValue输出的值与this,_data.inputValue和this.inputValue的值是一样的。为什么可以不用写$data,就可以访问到值,我看vue实例里名字是_data,那么$data是别名吗?

​这里的handleBtnClick函数可以使用箭头函数吗?如果可以使用,箭头函数没有this,在不使用如"app.$data.inputValue"这种写法的情况下如何解决。
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里输入代码,可通过选择【代码语言】突出显示

    const app = new Vue({
      el: '#app',
      data: {
        lists: [],
        inputValue:''
      },
      methods: {
        handleBtnClick:function(){
          console.log(this.$data.inputValue);
          console.log(this._data.inputValue);
          console.log(this.inputValue);
          app.$data.lists.push(app.$data.inputValue);
          app.$data.inputValue = '';
        }
      }
    })


写回答

1回答

好帮手慕久久

2020-12-09

同学你好,问题解答如下:

1、vue作为一个框架,它会以最方便的方式供用户使用。获取数据时,虽然写成his.$data.xxx、this._data.xxx都可以实现效果,但是二者的书写方式都不是很方便,所以vue就提供了this.xxx的形式,让我们更方便的访问数据。这是vue底层提供的方式,我们会用即可。

2、vue实例中的属性,不是都给用户使用的,很多是给vue底层使用的。比如$data和_data,$data可以被我们使用,但是_data则是给底层逻辑使用的,可以理解成不对外,所以二者不能简单的理解成别名的意思。

3、可以改成箭头函数。直接使用app.xxx即可(变量app就是vue实例):

http://img.mukewang.com/climg/5fd030860956ad7b06470347.jpg

建议methods中的方法,为了方便使用this,不要写成箭头函数。

祝学习愉快!

0

0 学习 · 10739 问题

查看课程