vue源码学习之数据初始化(代码片段)

关键词：

首发地址：CJWbiu‘s Blog

　　在这里思考一个问题，使用Vue的时候需要在创建Vue实例时传入一个option，这里包含了我们定义的props、methods、data等。而在methods的方法中获取data中的key值都是直接通过this.key获取option对象中的methods中的定义的方法如何通过this访问到data中的数据呢？

let vue = new Vue(
    el: ‘#app‘,
    methods: 
      say() 
        console.log(this.msg)
      
    ,
    data: 
      msg: ‘jjjjj‘
    
)

　　一开始我想是将data和methods中的数据全都挂载到了vm上，然而Vue实例上有methods中定义的方法，却没有data中的属性,data中的数据全部存储在vm._data中，通过this.key访问其实是this._data.key,Vue在这里做了一层代理，通过defineProperty设置了vm的getter和setter，而methods中的方法在initMethods方法中将其中的this绑定到了vm上，这样methods中方法访问的this也就指向了_data。 

　　下面是参照源码相关逻辑的简化代码：

function MyVue(option) 
  this._init(option);


MyVue.prototype._init = function(option) 
  const vm = this; 
  vm.$options = option; //源码在此做了对子组件option的合并处理
  if(vm.$options.methods) initMethods(vm, vm.$options.methods); //源码中还有对props的处理,data、props、methods都会做查重处理，不能有相同的属性名
  if(vm.$options.data) initData(vm);


function initMethods(vm, methods) 
  const props = vm.$options.props
  for (const key in methods) 
    vm[key] = methods[key].bind(vm);  //将methods上的方法挂载到vm上并将方法中所有的this指向vm，通过下面的proxy就可以访问到_data上的属性
  


function initData(vm)  //将data上数据复制到_data并遍历所有属性添加代理
  vm._data = vm.$options.data;
  const keys = Object.keys(vm._data); 
  let i = keys.length;
  while(i--)   
    const key = keys[i];
    proxy(vm, `_data`, key);
  

function proxy(target, sourceKey, key) 
  let sharedPropertyDefinition = ;
  sharedPropertyDefinition.get = function proxyGetter () 
    return this[sourceKey][key]
  
  sharedPropertyDefinition.set = function proxySetter (val) 
    this[sourceKey][key] = val
  
  Object.defineProperty(target, key, sharedPropertyDefinition)  //一层代理，每次访问this[key]时代理到this._data[key]


let app = new MyVue(
  methods: 
    say: function() 
      console.log(this.msg + this.age);
    
  ,
  data: 
    msg: ‘jjj‘,
    age: 33
  
)
app.say(); //jjj33

vue学习之vuex(代码片段)

单向数据流概念Vuex介绍解决问题多个视图依赖于同一状态（菜单导航）来自不同视图的行为需要变更为同意状态（例如：评论弹幕）Vuex应运而生为vue.js开发的状态管理模式组件状态集中管理组件状态改变遵循统一的规则store.js//... 查看详情

abp框架源码学习之修改默认数据库表前缀或表名称(代码片段)

1，源码1namespaceAbp.Zero.EntityFramework23///<summary>4///Extensionmethodsfor<seecref="DbModelBuilder"/>.5///</summary>6publicstaticclassAbpZeroDbModelBuilderExtensions78///<summa 查看详情

vue学习之四组件系统(代码片段)

vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。一、Vue.js组件系统每一个新技术的诞生，都是为了解决特定的问题... 查看详情

vue学习之vue属性绑定和双向数据绑定(代码片段)

···<!DOCTYPEhtml>vue<!--vue中的属性绑定和双向数据绑定属性绑定：v-bind:title="title"或:title="title"双向数据绑定：v-model--><divid="root"><div:title="title">himan</div><inputv-model="content&quo... 查看详情

4.vuex学习之gettersmapgetters(代码片段)

gettters可以理解为计算属性在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1constgetters=//vue2.0不要使用箭头函数,getters主要任务就是对状态state对象里面的数据，执行计算后输出count:function(state)ret... 查看详情

数据结构学习之单链表基本操作(代码片段)

...验的单链表元素的类型为char，完成如下实验要求：（1）初始化单链表h（2）采用尾插法依次插入a、b、c、d、e（3）输出单链表h（4）输出单链表h的长度（5）判断单链表h是否为空（6）输出单链表h的第3个元素（7）输出元素a的逻... 查看详情

数据结构学习之双链表基本操作(代码片段)

...的双链链表元素的类型为char，完成如下实验要求：（1）初始化单链表h（2）采用尾插法依次插入a、b、c、d、e（3）输出单链表h（4）输出单链表h的长度（5）判断单链表h是否为空（6）输出单链表h的第3个元素（7）输出元素a的逻... 查看详情

jquery学习之初始化和获取值(代码片段)

jquery在运行的时候在界面加载完之后再加载jquery对象，jquery加载的元素就会被加载出来$(document).ready(function()　　//这里填写需要执行的代码);  查看详情

vue学习之介绍(代码片段)

一.vue概念#1.什么是Vue#Vue.js是一个渐进式JavaScript框架#渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，东可以用vue框架来实现#vue可以干哪些事#将数据渲染到指定区域（数据可以是后台获... 查看详情

vue学习之组件(代码片段)

vue官方文档中定义组件通过调用Vue.component方法，一般没使用 定义组件一个组件为一个vue文件，包含template（必须有），script，style三部分 //com.vue<templatelang="html"><div>//只能有一个html标签包裹里面所有节点　　　ch... 查看详情

tensorflow源码学习之五--同步训练和异步训练(代码片段)

 同步和异步训练是由optimizer来决定的。    1.同步训练    同步训练需要使用SyncReplicasOptimizer，参考https://www.tensorflow.org/api_docs/python/tf/train/SyncReplicasOptimizer 。其他opt 查看详情

vue学习之vuex(代码片段)

1 首先还是安装 npm install vuex --save、2在src这种创建目录为store创建index.js (getters.js,actions.js,mutations.js,state.js)这些是store里面的属性看情况一般分这几个文件写，也可以合并写在index.js，没有index.js就写在store.j... 查看详情

创龙dsp6748学习之rs485收发(代码片段)

...分别接上拉和下拉电阻？2.看下代码部分，主要是串口的初始化和串口的收发，voidUARTInit(void)//配置UART1参数//波特率115200数据位8停止位1无校验位UARTConfigSetExpC 查看详情

3.vuex学习之mutationsmapmutations(代码片段)

mutations状态更改　　在mutations对象中创建更改state状态的方法。mapMutations是vuex提供的辅助函数在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1//触发的状态，mutations是同步的constmutations=jian(st 查看详情

深入vue3源码，学习响应式原理(代码片段)

...据的响应的。Object.defineProperty存在以下几个方面的缺点。初始化的时候需要遍历对象的所有属性进行劫持，如果对象存在嵌套还需要进行递归。导致初始化的时候需要消耗一些资源用于递归遍历。从上面可以推导出Vue 查看详情

hadoop-2.4.1学习之map任务源码分析(下)(代码片段)

    在Map任务源码分析（上）中，对MAP阶段的代码进行了学习，这篇文章文章将学习Map任务的SORT阶段。如果Reducer的数量不为0，则还需要进行SORT阶段，但从上面的学习中并未发现与MAP阶段执行完毕调用mapPhase.complete... 查看详情

5.vuex学习之acrionsmapactions(代码片段)

Action类似于mutation，不同在于：　　1.Action提交的是mutation，而不是直接变更状态。　　2.Action可以包含任意异步操作。在store.js中importVuefrom‘vue‘importVuexfrom‘vuex‘Vue.use(Vuex)//访问状态对象conststate=count:1,age:10//触发的状态，mutatio... 查看详情

源码学习之线程池(代码片段)

大家面试过程中肯定被问道过线程池。为什么要使用线程池呢？因为在系统中频繁创建线程会造成很大的CPU消耗。而且用完的线程要等待GC回收也会造成消耗。下面我们就来学习下最常用的线程池 ThreadPoolExecutor，首先先来看... 查看详情