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=" ...
随机推荐
- 4、Android-数据存储方案(文件存储/SharedPreferences)
简介: 任何一个应用程序都需要和数据进行交互 对于软件来说微博.QQ等都需要关系的是数据 没有数据的应用程序是一个没有灵魂的软件 而且还没有实际的用途 可以认为是单机 4.1.持久化技术的简介 数据持 ...
- hdu_1009 贪心
FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- fpn
class-aware detector 和 class-agnostic detector:https://blog.csdn.net/yeyang911/article/details/68484 ...
- SpringBoot实战(十三)之缓存
什么是缓存? 引用下百度百科的解释: 缓存就是数据交换的缓冲区(又称作Cache),当某一硬件要读取数据时,会首先从缓存中查找需要的数据,找到了则直接执行,找不到的话则从内存中查找.由于缓存的运行速度 ...
- 使用java代码将时间戳和时间互相转换
时间戳转时间: SimpleDateFormat simpleDateFormat = null; simpleDateFormat = new SimpleDateFormat("yyyy ...
- ios的framework合并
# 运行此脚本前 # 先编译一遍工程 确保正常运行 没有报错 # 作为Xcode Aggregate运行 # file-->new target-->cross-platform--> ...
- C#实体更新指定的字段
接口类: /// <summary> /// 更新指定字段 /// </summary> /// <param name="entity">实体 ...
- java String详解
创建字符串: 1. String(char a[]) char a[] = {'g','o','o','d'}; String str = new String(a); 2. String(char ...
- list 去重复元素
public static List removeDuplicate(List list){ List listTemp = new ArrayList(); for(int i=0;i<lis ...
- Ubuntu操作系统(我的是ubuntu 18.04.3 LTS)
查看是否开启了ssh服务是否安装,使用命令: sudo ps -e |grep ssh 如果安装了的是会有sshd服务的,下面的图片是没有安装ssh服务 2 先更新资源列表,使用命令: sudo ap ...