Vue.js中this如何取到data和method里的属性详解

目录
  • 准备工作
  • 调试源码
  • initMethods
  • initData
  • 结束语

本篇文章介绍的是Vue.js如何取到data和methods里的属性？

准备工作

  • 克隆源码到本地
git clone https://github.com/vuejs/vue.git

下载完毕后，用vscode打开，目光移动到package.json的scripts属性，我们看到有dev和build，dev会启动一个开发环境的服务，也就是说，我们在源码里做的改动，都会及时生效。build就是打包。和我们平时开发Vue.js项目是一个道理。

我们首先安装一下Vue.js项目的依赖（使用pnpm），然后运行npm run dev。这样的好处就是我们能随时看到代码改动后的效果。

  • 接下来我们在examples目录下创建一个html文件，引入打包后的vue.js
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <h1 @click="changeMsg">hello {{msg}}</h1>
   </div>
   <script src="../dist/vue.js"></script>
   <script>
     const vm = new Vue({
       el: '#app',
       data: {
         msg: 'world'
       },
       methods: {
         changeMsg() {
           this.msg = 'me'
         }
       }
     })
   </script>
 </body>
</html>
  • 安装一个serve全局包启动, 在根目录运行一下serve，就能看到页面展示出来了。

调试源码

我们这里使用谷歌浏览器调试，F12找到sources面板如下图所示的位置打上断点，接着刷新页面，就进入了调试模式。

然后，我们就通过step into按钮进入new Vue的函数内部。 接着进入_init的内部，找到initState(vm),也就是当前文件代码的4714行，这个函数的内部就是我们要研究的部分。

进入initState内部，我们看到

  if (opts.methods)
          initMethods(vm, opts.methods);
      if (opts.data) {
          initData(vm);
      }

initMethods

function initMethods(vm, methods) {
      var props = vm.$options.props;
      for (var key in methods) {
          {
              if (typeof methods[key] !== 'function') {
                  warn$2("Method \"".concat(key, "\" has type \"").concat(typeof methods[key], "\" in the component definition. ") +
                      "Did you reference the function correctly?", vm);
              }
              if (props && hasOwn(props, key)) {
                  warn$2("Method \"".concat(key, "\" has already been defined as a prop."), vm);
              }
              if (key in vm && isReserved(key)) {
                  warn$2("Method \"".concat(key, "\" conflicts with an existing Vue instance method. ") +
                      "Avoid defining component methods that start with _ or $.");
              }
          }
          vm[key] = typeof methods[key] !== 'function' ? noop : bind$1(methods[key], vm);
      }
  }
  • 首先判断组件内部是否声明了函数
  • 其次判断是否和props、保留键名的名字冲突了
  • 最后是处理逻辑，如果对应值的类型是函数将传入的vm对应的属性赋值，否则为noop，赋值的函数这里做了一个强绑（使用的bind, this指向vm）。这个bind$来自原生的bind方法
var bind$1 = Function.prototype.bind ? nativeBind : polyfillBind;

initData

调试完了initMehtods后，就开始initData,我们使用step out按钮就跳出了当前函数，接着进入initData内部。

function initData(vm) {
      var data = vm.$options.data;
      data = vm._data = isFunction(data) ? getData(data, vm) : data || {};
      if (!isPlainObject(data)) {
          data = {};
          warn$2('data functions should return an object:\n' +
                  'https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm);
      }
      // proxy data on instance
      var keys = Object.keys(data);
      var props = vm.$options.props;
      var methods = vm.$options.methods;
      var i = keys.length;
      while (i--) {
          var key = keys[i];
          {
              if (methods && hasOwn(methods, key)) {
                  warn$2("Method \"".concat(key, "\" has already been defined as a data property."), vm);
              }
          }
          if (props && hasOwn(props, key)) {
              warn$2("The data property \"".concat(key, "\" is already declared as a prop. ") +
                      "Use prop default value instead.", vm);
          }
          else if (!isReserved(key)) {
              proxy(vm, "_data", key);
          }
      }
      // observe data
      var ob = observe(data);
      ob && ob.vmCount++;
  }

逻辑和initMethods类似，和props、methods做了比对，最后通过proxy将data,绑定到vm上

function proxy(target, sourceKey, key) {
      sharedPropertyDefinition.get = function proxyGetter() {
          return this[sourceKey][key];
      };
      sharedPropertyDefinition.set = function proxySetter(val) {
          this[sourceKey][key] = val;
      };
      Object.defineProperty(target, key, sharedPropertyDefinition);
  }

最终我们知道data的值是通过Object.defineProperty，实现绑定的。

结束语

我们要研究一个源码，首先要准备源码、serve、和调试工具（谷歌浏览器），然后进入代码的内部，才能看的清楚明白，我们就此知道了Vue.js的this如何取到data和methods的属性。

到此这篇关于Vue.js中this如何取到data和method里的属性的文章就介绍到这了,更多相关Vue.js this取data和method属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript this指向绑定方式及不适用情况详解

    目录 前言 问题复现 调用位置 默认绑定 隐式绑定 显式绑定 new 绑定 不适用的情况 总结 前言 JavaScript 中的 this 指向问题对于 web 前端入行不深的人来说是个比较复杂的问题.特写此文章来记录最近遇到的关于匿名函数中 this 指向问题的思考和感悟. 问题复现 最近在研究函数防抖场景时看到如下代码: function debounce(fn, delay) { var timer; // 维护一个 timer return function () { var _this

  • JS 箭头函数的this指向详解

    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承. 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest 无法使用yield命令,所以箭头函数无法用作Generator函数 因为没有自己的this,所以没法通过bind.call.apply来改变this指向 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制 箭头函数的this从外层代码

  • Vuejs使用addEventListener的事件如何触发执行函数的this

    Vuejs使用addEventListener的事件如何触发执行函数的this

    目录 使用addEventListener事件触发执行函数的this 如下面的例子 addEventListener中事件函数的this指向问题 看代码 代码2 使用addEventListener事件触发执行函数的this 在普通的dom操作中,若是使用addEventListener 如下面的例子 <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta

  • JS 中在严格模式下 this 的指向问题

    目录 前言 一.全局作用域中的this 二.全局作用域中函数中的this 三.对象的函数(方法)中的this 四.构造函数的this 五.事件处理函数中的this 六.内联事件处理函数中的this 七.定时器中的this,指向的是window 参考资料 前言 非严格模式下的 this 指向可能我们会经常遇到,但是严格模式下的 this 指向不是经常碰到,关于严格模式下的 this 指向是怎么样的,都是指向哪些,这篇博文将会很仔细地说清楚. 一.全局作用域中的this 在严格模式下,在全局作用域中

  • 普通js文件里面如何访问vue实例this指针

    普通js文件里面如何访问vue实例this指针

    目录 普通js文件里访问vue实例this指针 then使用函数无法访问vue实例化的this 问题 原因 解决 普通js文件里访问vue实例this指针 main.js 文件,暴露出vue实例 Vue.use(VueAxios) const vue = new Vue({   router,   store,   created: bootstrap,   render: h => h(App) }).$mount('#app') export default vue js 文件中,使用实例

  • 详解JavaScript原型对象的this指向问题

    详解JavaScript原型对象的this指向问题

    目录 一.this指向 二.修改this指向 1.call()方法 2.apply()方法 总结 一.this指向 构造函数中的this 指向实例对象.那么原型对象this的指向呢? 如下: function Student(age,name){ this.age = age; this.name = name; } var that; Student.prototype.score = function(){ console.log('孩子们成绩都很好!'); that = this; } v

  • 关于vue.js中this.$emit的理解使用

    关于vue.js中this.$emit的理解使用

    目录 一.每个 Vue 实例都实现了事件接口 二.注意事项 三.例子及说明 四.总说明 一.每个 Vue 实例都实现了事件接口 即: 1.使用 $on(eventName) 监听事件 2.使用 $emit(eventName, optionalPayload) 触发事件 二.注意事项 1.父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 2.不能用 $on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定 三.例子及说明 1.父组件代码及说明 <template>

  • vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入

  • js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解

    indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索. substring() 方法用于提取字符串中介于两个指定下标之间的字符. substr(start,length)表示从start位置开始,截取length长度的字符串 split 将一个字符串分割为子字符串,然后将结果作为字符串数组返回 replace 用于在字符串中用一些字符替换另一些字符,或替换一个与正则

  • JS中Json数据的处理和解析JSON数据的方法详解

    JS中Json数据的处理和解析JSON数据的方法详解

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以&quo

  • 深入浅析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

  • 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.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • Vue.js中的图片引用路径的方式

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png

  • vue.js中指令Directives详解

    vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

  • 深入理解vue.js中$watch的oldvalue与newValue

    $watch中的oldvalue和newValue 大家都知道,在vue.js中给我们提供了$watch的方法来做对象变化的监听,而且在callback中会返回两个对象,分别是oldValue和newValue. 顾名思义,这两个对象就是对象发生变化前后的值. 但是在使用过程中我发现这两个值并不总是预期的.下面来一起看看详细的介绍: 定义data的值 data: { arr: [{ name: '笨笨', address: '上海' }, { name: '笨笨熊', address: '北京'

随机推荐