数组封装

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方法,在数组初始化的时候 用新定义的方法代替了数组原有方法,从而实现对数组操作的封装

组件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的差不多了,再去对照源码验证自己的猜想:)

  

Vue 数组封装和组件data定义为函数一些猜测的更多相关文章

  1. Vue文件封装日历组件

    封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式. 效果展示网址:https://1963331542.github.io/ 源代码: <template> ...

  2. Vue 组件 data为什么是函数?

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  3. Vue 组件 data为什么是函数

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  4. Vue自行封装常用组件-弹出框

    使用方法: 1.在父组件中引入"box.vue" //import popUpBox from "./box.vue";   2.在父组件中注册 popUpBo ...

  5. [ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭

    场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...

  6. Vue自行封装常用组件-倒计时

    倒计时组件,比较复杂一点,大神勿调侃,精确到毫秒,因为项目中多次出现倒计时,所以拿出来分享下 使用方法:1.在父组件中引入"uni-countdown" //import uniC ...

  7. Vue自行封装常用组件-文本提示

    使用方法:1.在父组件中引入"toast.vue" //import toast from "./toast"; 2.在父组件中注册 toast //compo ...

  8. Vue中封装axios组件实例

    首先要创建一个网络模块network文件夹  里面要写封装好的几个组件 在config.js里面这样写 在index.js要这样写 core.js文件里面内容如下 然后要在main.js文件里面要设置 ...

  9. vue中封装swipe组件

    <template> <!-- TODO swipe --> <div id="hy-swiper"> <div class=" ...

随机推荐

  1. [19/04/25-星期四] GOF23_结构型模式(适配器模式、代理模式)

    一.引言 结构模式:核心作用就是从程序的结构上实现松耦合,从而扩大整体的类结构,用来解决更大的问题. 二.适配器模式(adapter) 生活中假设笔记本是标准的USB接口但是外置键盘是圆形接口,这时候 ...

  2. 3、Spring Cloud - Eureka(构建服务端/客户端)

    3.1.Eureka简介 3.1.1.什么是 Eureka 和Consul.Zookeeper 类似, Eureka 是一个用于服务注册和发现的组件,最开始主要应用 于亚马逊公司旗下的云计算服务平台 ...

  3. Infiniband基本知识

    InfiniBand架构是一种支持多并发链接的“转换线缆”技术,在这种技术中,每种链接都可以达到2.5 Gbps的运行速度.这种架构在一个链接的时候速度是500 MB/秒,四个链接的时候速度是2 GB ...

  4. 浏览器打印不出div背景颜色

    在body样式添加 -webkit-print-color-adjust: exact;

  5. Dubbo实践(四)设计模式

    Dubbo框架在初始化和通信过程中使用了多种设计模式,可灵活控制类加载.权限控制等功能. 工厂模式 Provider在export服务时,会调用ServiceConfig的export方法.Servi ...

  6. 启动 NFS 守护进程:rpc.nfsd: writing fd to kernel failed: errno 111 (Connection refused)

    启动 NFS 守护进程:rpc.nfsd: writing fd to kernel failed: errno 111 (Connection refused) rpc.nfsd: unable t ...

  7. [LuoguP2158][SDOI2008]仪仗队

    [LuoguP2158][SDOI2008]仪仗队(Link) 现在你有一个\(N \times N\)的矩阵,求你站在\((1,1)\)点能看到的点的总数. 很简洁的题面. 这道题看起来很难,但是稍 ...

  8. redis集群环境搭建的错误

    安装redis集群需要版本号在3.0以上 redis-cluster安装前需要安装ruby环境 搭建集群需要使用到官方提供的ruby脚本. 需要安装ruby的环境. yum -y install ru ...

  9. [iOS]app的生命周期

    对于iOS应用程序,关键的是要知道你的应用程序是否正在前台或后台运行.由于系统资源在iOS设备上较为有限,一个应用程序必须在后台与前台有不同的行为.操作系统也会限制你的应用程序在后台的运行,以提高电池 ...

  10. Easyui之accordion修改Title样式,字体等

    .accordion{background:#fff;overflow:hidden;}.accordion .accordion-header{background:#efefef;border-t ...