Vue2的this里面到底藏了什么东西！！在编写vue2的项目中，我们经常会使用到this,但是你知道Vue2的this

theme: fancy highlight: atelier-heath-light

在编写vue2的项目中，我们经常会使用到this,但是你知道Vue2的this具体指向什么吗？它里包含那些方法吗？下面我们就来好好研究一下。

Vue2的this指向

我们都知道JS中JS 中的 this 指向取决于函数的调用方式，只有在知道了函数的调用方式后，我们才能确定this的指向的对象。

在Vue2里也一样，在Vue2里我们的this指向有如下规则

生命周期函数、watch、computed 和 data 中的 this 指向 Vue 实例对象。
methods 中的 this 取决于函数类型：
- 普通函数的 this 指向 Vue 实例对象。
- 箭头函数没有自己的this，因此this指向其宿主对象的this（注意宿主对象是函数对象（它被调用后this的指向要进行具体分析），简单对象没有this）
- 普通函数形式的回调函数的this是window，箭头函数形式的回调函数的this遵循箭头函数的原则（大多数情况下是vue实例对象）

当然如果我们想在methods中让this指向vue实例的话也不是没有办法。

我们可以使用bing改变this的指向

showThis(){
    setTimeout(function() {
      console.log(this) //指向vue实例   
    }.bind(this), 10)
},

我们可以把vue实例的this赋值给另一个变量再使用

showThis(){
 var self=this;
    setTimeout(function() {
       console.log(self)  //指向vue实例 
    }, 10)      
},

代码示例：

export default {
  name: 'HelloWorld',
  data () {
    console.log("data",this) //Vue实例
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed: {
    reversedMsg() {
      console.log('computed:', this); // vue实例
      return this.msg
    }
  },
  watch: {
    msg(newVal, oldVal) {
      console.log('watch:', this); // vue实例
    }
  },
  beforeCreate() {
    console.log('beforeCreate:', this); // vue实例
  },
  created () {
    console.log("created",this) //vue实例
    this.showThis1();
    this.showThis2();
    this.showThis3();
    this.msg = 'Hello, Vue!';
  },
  beforeMount() {
    console.log('beforeMount:', this); // vue实例
  },
  mounted() {
    console.log('mounted:', this); // vue实例
  },
  beforeUpdate() {
    console.log('beforeUpdate:', this); // vue实例
  },
  updated() {
    console.log('updated:', this); // vue实例
  },
  beforeDestroy() {
    console.log('beforeDestroy:', this); // vue实例
  },
  destroyed() {
    console.log('destroyed:', this); // vue实例
  },
  methods:{
    showThis1(){
      console.log("methods",this)  //vue实例
    },
    showThis2(){
      setTimeout(function() {
        console.log("回调函数",this) //指向window  因为没人调用这个普通函数
      }, 10)
    },
    showThis3() {
      setTimeout(() => {
          console.log("回调函数里的箭头函数",this) //this指向vue实例
      }, 10)
    }
  }
}

Vue 2 实例属性、方法和内部属性详解

Vue 实例属性可分为以下几类：

1. 访问子组件和父组件:

$children: 包含当前实例的所有子组件实例的数组。允许访问子组件实例，但不推荐直接操作子组件实例。
$parent: 指向当前实例的父实例。允许访问父组件实例，但不推荐直接操作父组件实例。

2. 访问插槽和 ref:

$slots: 包含所有插槽内容。允许访问插槽内容。
$refs: 包含注册了 ref 属性的所有子组件实例或 DOM 元素。允许直接访问子组件实例或 DOM 元素。

3. 访问其他重要信息:

$createElement: 用于手动创建 VNode，通常在渲染函数中使用。为高级用户提供手动创建 VNode 的能力。
$el: 指向当前组件的根 DOM 元素。用于访问组件的根元素，例如操作 DOM 节
$attrs: 包含父作用域中绑定的非 prop 属性。用于接收父组件的非 prop 特性。
$listeners: 包含父组件在当前组件上监听的事件。可以用于监听父组件的事件。
$options: 包含初始化实例时传入的所有选项。可以查看和修改组件的选项，但不推荐直接修改。
$root: 指向根 Vue 实例。允许访问根实例的属性和方法。
$vnode: 当前组件的占位 VNode。内部使用，表示组件在父组件中的位置。

4. 作用域插槽:

$scopedSlots: 包含作用域插槽对象。用于在作用域插槽中传递数据。

Vue 实例方法

Vue 实例方法主要用于处理组件逻辑

showThis1, showThis2, showThis3: 示例中定义的方法，用于处理组件逻辑。

Vue 内部属性

Vue 内部属性用于管理 Vue 实例的内部状态，开发者通常不需要直接操作这些属性。

_c: 内部使用的 createElement 函数，用于创建 VNode。
_computedWatchers: 包含所有计算属性的观察者，内部使用，管理计算属性的依赖和重新计算。
_data: 包含实例的数据对象，内部使用，存储数据。
_directInactive: 标记实例是否直接处于非活动状态，内部使用，管理实例的活动状态。
_events: 包含实例的所有事件监听器，内部使用，管理事件监听器。
_hasHookEvent: 标记实例是否有钩子事件，内部使用，优化事件监听。
_inactive: 标记实例是否处于非活动状态，内部使用，管理实例的活动状态。
_isBeingDestroyed: 标记实例是否正在被销毁，内部使用，管理销毁过程。
_isDestroyed: 标记实例是否已经被销毁，内部使用，管理销毁过程。
_isMounted: 标记实例是否已经挂载，内部使用，管理挂载状态。
_isVue: 标记对象是否为 Vue 实例，内部使用，区分 Vue 实例和普通对象。
_provided: 包含实例提供给子组件的数据，内部使用，实现依赖注入。
_renderProxy: 代理对象，用于渲染函数，内部使用，提供更好的错误提示。
_routerRoot: 指向根 Vue 实例的路由对象，内部使用，与 Vue Router 集成。
_scope: 包含实例的响应式作用域，内部使用，管理响应式作用域。
_self: 指向实例自身，内部使用，优化渲染过程。
_staticTrees: 包含静态树的缓存，内部使用，优化静态内容的渲染。
_uid: 实例的唯一标识符，内部使用，区分不同的实例。
_vnode: 当前组件渲染的 VNode，内部使用，表示组件的虚拟 DOM 节点。
_watcher: 实例的主观察者，内部使用，管理数据变化的响应。

Vue 计算属性和数据属性

reversedMsg: 计算属性，返回 msg 的反转字符串。示例中的计算属性。
$data: 包含实例的数据对象。访问和修改实例的数据。
$isServer:用于指示代码是否运行在服务器端还是浏览器端。当代码运行在服务器端时，它返回 true；当代码运行在浏览器端时，它返回 false
$props: 包含传递给组件的所有 prop。允许访问和修改 prop。

$router: 当前 Vue 实例的路由器实例。与 Vue Router 集成。
$ssrContext: 服务器端渲染时可用的属性，包含 SSR 上下文对象。

Vue 额外的方法

除了上面提到的 Vue 实例方法，Vue 还提供一些常用的方法：

$mount: 手动挂载未挂载的 Vue 实例。
$forceUpdate: 强制组件重新渲染。
$nextTick: 在下次 DOM 更新循环结束后执行延迟回调。
$destroy: 完全销毁一个实例。清理它与其他实例的连接，解绑它的全部指令及事件监听器。

VueComponent {
    $el
    $attrs
    $children
    $createElement
    $listeners
    $options
    $parent
    $refs
    $root
    $scopedSlots
    $slots
    $vnode
    showThis1
    showThis2
    showThis3
    _c
    _computedWatchers
    _data
    _directInactive
    _events
    _hasHookEvent
    _inactive
    _isBeingDestroyed
    _isDestroyed
    _isMounted
    _isVue
    _provided
    _renderProxy
    _routerRoot
    _scope
    _self
    _staticTrees
    _uid
    _vnode
    _watcher
    reversedMsg
    $data
    $isServer
    $props
    $router
    $ssrContext
    get $attrs
    set $attrs
    get $listeners
    set $listeners
    get msg
    set msg
  }