Vue中methods的this指向问题浅析

如果是组件的话，将会是VueComponent实例对象，Vue和VueComponent两个类其实差不都，今后会另外开章节描述两者差别，这里先飘过。

比如下面的简单的一个demo代码，点击按钮打印出this。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="../../dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="printThis">What is this</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          counter: 0,
        },
        methods: {
          printThis() {
            console.log("this:", this);
          },
        },
      });
    </script>
  </body>
</html>

最终打印的结果将会如下：

很明显，vue框架通过某种方法自动帮我们将methods下面的this指向到vue的实例对象了。

下面跟踪下vue的源代码，看下是怎么实现的。

首先，我们看下new Vue的入口，也即是Vue类的构造函数

function Vue(options) {
  ...
  this._init(options);
}

构造函数的参数options就是我们前面new Vue时传入的带有methods和data这些配置项的对象。

构造函数里面会做很多初始化的动作，这些动作都被封装到_init这个方法中了。因为是通过this调用的，所以我们可以猜想到这个方法应该是写到了Vue的prototype上的。

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this;
    ...
    // 将含有methods和data等配置项的对象合并并挂到Vue实例对象vm的$options属性上
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options);
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      );
    ...
    initState(vm);
    ...
  };
}

该方法会将我们new Vue时提供的带有methods和data的配置项放入到Vue实例对象的$options属性中，然后调用initState方法。

export function initState(vm: Component) {
  ...
  if (vm.$options.methods) initMethods(vm, vm.$options.methods);
  ...
}

因为我们提供了methods选项，记得吧？我们上面methods写了printThis方法。所以这里会调用到initMethods方法，传入的参数是Vue实例对象vm和我们传进来的methods选项。

function initMethods(vm: Component, methods: Object) {
  ...
  for (const key in methods) {
    ...
    vm[key] =
      typeof methods[key] !== "function" ? noop : bind(methods[key], vm);
  }
}

上面的代码逻辑主要就是循环methods里面的每个方法，然后将这些方法以相同的名字在vue实例对象中也放一份，比如我们的printThis方法，在vue实例对象中也来一份。

但是放到vue实例对象中的这些方法和原来的有一些区别，什么区别呢？就是通过上面的bind方法做了些调整。

这个bind方法看上去是不是很眼熟，名字和我们javascript用来修改this指向的bind方法一样。

而事实上这个bind方法最终调用的是一个叫做nativeBind的方法

function nativeBind (fn: Function, ctx: Object): Function {
  return fn.bind(ctx)
}

该方法做的事情就是将我们传入来的method，即我们这里的printThis方法的this的指向，指向到了传进来的vm，即我们的vue实例对象。

而这，也即是为什么我们在methods里面的方法可以通过this直接访问到Vue实例对象的原因了。

到此这篇关于Vue中methods的this指向问题浅析的文章就介绍到这了,更多相关Vue methods内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue2 this 能够直接获取到 data 和 methods 的原理分析

    目录 前言 源码 initMethods bind函数 isReserved initData getData proxy 简略实现 总结 前言 在平时使用vue来开发项目的时候,对于下面这一段代码,我们可能每天都会见到: const vm = new Vue({ data: { name: '我是pino', }, methods: { print(){ console.log(this.name); } }, }); console.log(vm.name); // 我是pino vm.pr

  • Vue2为何能通过this访问到data与methods的属性

    目录 前言 一.vue的使用 二.Vue的构造函数 三 初始化initMixin(Vue) 四 initState(vm) 五 initMethods(vm, opts.methods) 六 initData(vm) 七 proxy(vm, "_data", key) 总结 前言 在我没接触vue之前我不着调this是啥压根就没有接触过,在我学过了vue之后我知道了this,那时候理解的this就是你要使用data中的属性或调用methods中的方法等其他东西都要用this去调用,那时

  • 源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods

    源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods

    目录 1. 示例:this 能够直接获取到 data 和 methods 2. 准备环境调试源码一探究竟 2.1 Vue 构造函数 2.2 _init 初始化函数 2.3 initState 初始化状态 2.4 initMethods 初始化方法 2.4.1 bind 返回一个函数,修改 this 指向 2.5 initData 初始化 data 2.5.1 getData 获取数据 2.5.2 proxy 代理 2.5.3 Object.defineProperty 定义对象属性 2.6 文中

  • Vue中methods的this指向问题浅析

    如果是组件的话,将会是VueComponent实例对象,Vue和VueComponent两个类其实差不都,今后会另外开章节描述两者差别,这里先飘过. 比如下面的简单的一个demo代码,点击按钮打印出this. <!DOCTYPE html> <html lang="en"> <head> <script src="../../dist/vue.js"></script> </head> <

  • 对vue中methods互相调用的方法详解

    如下所示: 最近在学习vue,并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面,但是中间遇到methods里的方法调用问题.本身源码是没有调用的,但是我想直接调用多方便,结果出错了--然后百度了一波,终于解决了~ 分享并做个笔记. delAllOrderList:function(goods) { this.tableData = []; this.totalCount = 0; this.money = 0; }, checkout:functi

  • vue中methods、mounted等的使用方法解析

    vue中methods、mounted等的使用方法解析

    目录 methods.mounted的使用方法 vue生命周期(methods.mounted) 1.什么是生命周期 2.钩子函数 3.Vue生命周期之初始化阶段 methods.mounted的使用方法 created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行. watch:去监听一个值的变化,然后执行相对应的函数. computed:computed是计算属性,也就是依赖其它的属性计算

  • vue中created和mounted的区别浅析

    前言 关于vue.js中的生命周期,如果不是有特别的需求,一般在项目开发过程中更多的使用created和mounted, 所以在本文中主要讲解created与mounted在开发中的主要使用区别. 关于完整的生命周期,不久会在另一篇文章中做整体的理解,包括activated.destroyed等,不过可能会有点晚,大家可以留意一下 版本信息: 系统:win10 Vue:2.5.2 webpack:3.6.0 npm:6.9.0 node:10.15.3 生命周期 完整的生命周期图示为了避免占用板

  • Vue中created与mounted的区别浅析

    Vue中created与mounted的区别浅析

    大多数人在谈论生命周期钩子时会感到困惑的一件事是 created 和 mounted 之间的区别.有着相似的名称,觉得应该做同样的事情,但还是有一些细微的差别. 首先,created() 和 mounted() 都可以访问原型上的 data 和 props .例如,下面的代码中,这两个钩子将在控制台中打印出 My Data 和 My Props : <template> <div></div> </template> <script> expor

  • vue 在methods中调用mounted的实现操作

    首先可以在data中先声明一个变量 比如 sureDelBox : ' ' mounted 中 ---> methods 中 ---> this.sureDelBox(item) 直接this调用 这时候要传的参数别忘记带上 如果你要问在mounted中调用methods中的方法 那么如果是我 我会直接把这个方法直接写在mounted中 补充知识:vue中methods一个方法调用另外一个方法 vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时

  • vue.js中methods watch和computed的区别示例详解

    vue.js中methods watch和computed的区别示例详解

    目录 前言 介绍 一.作用机制上 二.从性质上 三.watch和computed的对比 四.methods不处理数据逻辑关系,只提供可调用的函数 五.从功能的互补上看待methods,watch和computed的关系 六.利用computed处理watch在特定情况下代码冗余的现象,简化代码 总结 computed watch 前言 这篇文章主要简述vue中的watch和computer区别,还有methods 首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~, 哈哈哈哈哈不开玩笑了

  • Vue中computed与methods的区别详解

    Vue中computed可以用来简单的拼接需要展示的数据 computed and methods 拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用 一个简单的实例 computed只在初始化时被调用 computed只在初始化时被调用 methods会在数据变化时被调用, 即使变动的数据与自身无关 测试源码 <!DOCTYPE html> &l

  • 浅析vue中的nextTick

    浅析vue中的nextTick

    背景 vue是异步渲染的,当data改变之后,DOM不会立刻被渲染,页面渲染时会将data的修改做整合,多次data修改只会做整合最后一次性渲染出来,这也是异步渲染的原因.只有异步渲染才可以实现整合操作. 例子 methods: { update() { for (let i = 0; i < 10; i++) { this.testNum = this.testNum + i; } }, }, 在你的 Vue 视图中, testNum 会发生变化.不过需要注意的是这个变化的过程,虽然我们把 f

  • 基于Vue中this.$options.data()的this指向问题

    目录 this.$options.data()的this指向问题 vue文档中有关于data的指向问题的解释 vue骚操作之this.$options.data() 重置vue组件的data数据 小结一下 this.$options.data()的this指向问题 项目里遇到一个问题,用this.$options.data()重置组件data时报错,原因是因为form里的rule规则采用了this写法. 如下: rules: {         code: [this.$rules.requir

随机推荐