Vue 数组封装和组件data定义为函数一些猜测
数组封装
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定义为函数一些猜测的更多相关文章
- Vue文件封装日历组件
封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式. 效果展示网址:https://1963331542.github.io/ 源代码: <template> ...
- Vue 组件 data为什么是函数?
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
- Vue 组件 data为什么是函数
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
- Vue自行封装常用组件-弹出框
使用方法: 1.在父组件中引入"box.vue" //import popUpBox from "./box.vue"; 2.在父组件中注册 popUpBo ...
- [ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭
场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...
- Vue自行封装常用组件-倒计时
倒计时组件,比较复杂一点,大神勿调侃,精确到毫秒,因为项目中多次出现倒计时,所以拿出来分享下 使用方法:1.在父组件中引入"uni-countdown" //import uniC ...
- Vue自行封装常用组件-文本提示
使用方法:1.在父组件中引入"toast.vue" //import toast from "./toast"; 2.在父组件中注册 toast //compo ...
- Vue中封装axios组件实例
首先要创建一个网络模块network文件夹 里面要写封装好的几个组件 在config.js里面这样写 在index.js要这样写 core.js文件里面内容如下 然后要在main.js文件里面要设置 ...
- vue中封装swipe组件
<template> <!-- TODO swipe --> <div id="hy-swiper"> <div class=" ...
随机推荐
- 3、Android-全局大喇叭-广播机制
所谓的官博机制可以理解成为1对多的概念 即一个喇叭所有的人都能听到(统一范围内) 为了便于及逆行系统级别的消息通知 Android引入了一套广播机制 而且更容易进行实现. 3.1.广播机制的简介 再A ...
- Windows安装openssl
Windows下有两种方式安装openssl,第一种是采用安装包方式进行安装,第二种是采用编译源码方式进行安装.这里采用第一种方式,简单,直接. windows的openssl安装包的下载地址为:ht ...
- PAT——1064. 朋友数
如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如123和51就是朋友数,因为1+2+3 = 5+1 = 6,而6就是它们的朋友证号.给定一些整数,要求 ...
- CSU - 1581 Clock Pictures (KMP的变形题,难想到)
题目链接: http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1581 题目意思:告诉你现在有两个钟,现在两个钟上面都有n个指针,告诉你指针的位置, ...
- POJ 1384 Intervals (区间差分约束,根据不等式建图,然后跑spfa)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1384 Intervals Time Limit: 10000/5000 MS (Java/Others ...
- 【JavaScript-基础-文件上传】
Upload 最原始方式 form表单提交 // html <form method="get" action="/test/upload"> &l ...
- Spring Cloud Sleuth 之Greenwich版本全攻略
微服务架构是一个分布式架构,微服务系统按业务划分服务单元,一个微服务系统往往有很多个服务单元.由于服务单元数量众多,业务的复杂性较高,如果出现了错误和异常,很难去定位.主要体现在一个请求可能需要调用很 ...
- java ssm 后台框架平台 项目源码 websocket 即时通讯 IM quartz springmvc
官网 http://www.fhadmin.org/D 集成安全权限框架shiro Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安全,更可靠E ...
- 【腾讯敏捷转型No.3】Scrum有什么好?
在敏捷转型的过程中,除了敏捷宣言中的四个价值观和十二条原则以外,并没有太多比较权威的理论实践. 如图一,敏捷宣言中的四个价值观: (图一) 四条敏捷核心价值观指出了敏捷的核心思想,但是并没有仔细说明具 ...
- redefinition of class解决
垃圾玩意我在这儿翻车了. 编译器:Code::Block(懒得用VS,而且又太大了,CB小,而且也就一个控制台程序) Note to myself: 写完一个class的文件定义,编译,通过之后: 1 ...