vue单文件中的this问题

Question

代码如下:

在vue单文件的created钩子中输出this，按理说应该是输出该组件的vm对象，但是却输出一个对象
导致我不能再子组件中获取$router $store ... 难受

一个vm对象的正常样子应该是这样的

what???

Answer 1

不要用 => 箭头函数，要写得和 data () 一样，created ()
这是因为 Vue 构造函数要在构造 Vue 实例之后才会通过绑定的方式将 created 与 Vue 实例绑定，而 => 箭头函数不支持绑定

再补充点信息，你这里看到的 this 是不是有点眼熟？
它就是 vue-loader 将 .vue 文件转换之后生成的 Vue 组件选项对象，基本内容来自于 .vue 单文件组件中 script 语言块所 export default 的对象，此外 template 语言块中的模板内容被转换成了 render。
想学习更多关于 vue-loader 及 webpack 知识，欢迎参与我发起的讲堂学习 Vue 你需要知道的 webpack 知识，目前该讲堂的收入都将捐献给内容简介中轻松筹项目的受助人。
感谢关注，欢迎参与~~~

Answer 2

实例生命周期

不要选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。

Answer 3

import Vue from 'vue'
let v = new Vue();