Vue访问实例属性容易遗漏的知识点

在vue应用中很容易访问实例的属性，本没有什么好说的，但是有一个知识点往往容易遗漏，
就好像写习惯了:src就容易忘了它是v-bind的语法糖，写习惯了@click就容易忘了它是v-on:click的语法糖。今天就要讲一下Vue为访问实例属性提供了代理。

对于下面一个普通vue应用：

var app = new Vue ({
    el: '#app',
    data: {
        test: 'this is testData'
    }
})
console.log(app.test); // 'this is testData'
console.log(app.el); // undefined

如上app.test的方式是没问题的，但是通过app.el的方法来访问el属性，却是办不到的，得使用app.$el才能访问到。原因在于vue对于实例属性与方法基本都是以$开头，只是对data、props等属性里的对象做了代理（变相又是一种语法糖~~）。所以我们才能直接app.test这样去访问实例属性。那么：

console.log(app.$data.test); // 'this is testData'

这一点通过输出app对象也能看的出来：

QQ图片20180312195543.png