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=" ...
随机推荐
- git编译安装报错 http-push.c:20:19: 警告:expat.h:没有那个文件或目录
解决: [root@hdoop3 git-2.18.1]# yum install expat-devel
- 关于RAM与ROM的区别与理解
随机存取存储器(random access memory,RAM)又称作“随机存储器”,是与CPU直接交换数据的内部存储器,也叫主存(内存).它可以随时读写,而且速度很快,通常作为操作系统或其他正在运 ...
- 如何利用java程序实现加密所需的公钥、密钥、数字证书
本篇的主要目的在于实现pdf的数字签名问题,只是作为我学习知识的总结. 1.数字签名算法的概述 本部分主要参考于:https://blog.csdn.net/lovelichao12/article/ ...
- 错误:maximum number of expressions in a list is 1000
某一日发现这么如下这么一个错误 --> maximum number of expressions in a list is 1000 原因:因为SQL语句中用到了IN字句,而IN中的元素个数 ...
- Spotlight On Oracle安装和使用
Spotlight On Oracle安装和使用 软件版本:Version: 5.0.1.1022 注册码:063920179532918005749 Site Message:Quest Free ...
- RandomAccessFile类——高效快捷地读写文件
RandomAceessFile类 RandomAccessFile类是一个专门读写文件的类,封装了基本的IO流,在读写文件内容方面比常规IO流更方便.更灵活.但也仅限于读写文件,无法像IO流一样,可 ...
- ztree案例笔记:用户不规范操作导致添加不了节点的问题
我使用ztree开发了简码"万能助手",经过一段时间的观察,发现有个别用户不看教程就开始操作,总能给我折腾出一些让人哭笑不得的问题. 比如,把某个根栏目里的节点全删除,然后发现添加 ...
- MySQL架构与引擎初识
一.MySQL逻辑架构 1.连接层: 最上层是一些客户端和连接服务,所包含的服务并不是MySQL所独有的技术.它们都是服务于C/S程序或者是这些程序所需要的 :连接处理,身份验证,安全性等等. 2.服 ...
- echarts 地图 免费离线js,json包分享
最近,项目中需要用到地图,由于项目的特殊性,只能使用内网获取数据. 然而,echarts官网上的离线地图包(http://echarts.baidu.com/download-map.html)早在一 ...
- 百度地图热力图--批量地址转换应用(基于百度api)
需求:把外卖订餐地址做个用户分布热力图 思路分析:第一步去百度地图api开放平台找例子 http://lbsyun.baidu.com/jsdemo.htm#c1_15 首先从百度API的demo例子 ...