Vue 数组封装的和组件data定义为函数一些猜测

blowfish 2018-09-02 原文

数组封装

var vm={
    list:[0,1]
}
var push=vm.list.push;//把数组原来的方法存起来
vm.list.push=function(arg){//重新定义数组的push方法
    push.call(this,arg);//调用老的push方法
    console.log('数组增加项');//执行其他相关的程序
}

//这里实际上新的push方法应该是放在__proto__里，上面这么写是方便理解

这里实际上新的push方法应该是放在__proto__里，上面这么写是方便理解

　上面我定义了一个简单的push方法，在数组初始化的时候用新定义的方法代替了数组原有方法，从而实现对数组操作的封装

组件data定义

var component1={
     data:{
       name:'test'
    }
}
var component2={
     data:function(){
       name:'test'
    }
}

var vm1.xxx=component1.data;//引用
var vm2.xxx=component1.data();//复制

　　组件的data一般是不能引用的，因为一个页面可能有好几个改类型的组件

　　定义为函数，可以更方面每个组件的data初始化

　　最近在使用Vue，在使用的过程中，慢慢对Vue的设计原理有了一些猜想，这个系列的文章就是阐述这些猜想，这些猜想并不是阅读源码的结果，纯粹是使用过程中的猜测，这个系列的文章会陆续更新，主要是用来和大家讨论Vue的实现。要研究Vue的实现，并不是每个人都适合直接看源码的，只是我不太适合直接看源码，我还是喜欢用了后，自己先在脑海里里YY一下，能都YY的差不多了，再去对照源码验证自己的猜想：）