一、普通函数中的this 

 

这是vue文档里的原话：

All lifecycle hooks are called with their 'this' context pointing to the Vue instance invoking it.

意思是：在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）。 

 

  1. <div id="app">

  2.     <button class="btn btn-primary" v-on:click="on()">点击添加并查看this</button>

  3.     <ul class="list-group" v-for="item in list">

  4.         <li class="list-group-item">{{item}}</li>

  5.     </ul>

  6. </div>

  7. <script>

  8.     new Vue({

  9.         el: "#app",

  10.         data: {

  11.             list: ["banner", "orange", "apple"]

  12.         },

  13.         methods: {

  14.             on: function() {

  15.             alert(this.list);

  16.             this.list.push("Potato")

  17.         }

  18. })

  19. </script>

实例：这里的this指向的是new Vue这个对象。new Vue也可以写成var C=new Vue({}).所以这里的this指向的是C。

 

 

二、箭头函数中的this

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。

这里箭头函数指向window。