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=" ...
随机推荐
- Android绘图机制和处理技巧
色彩特效处理 在色彩处理中,使用以下三个角度来描述一个图像. 色调: 物体传播的颜色 饱和度: 颜色的纯度, 从0(灰)到100%(饱和)来进行描述 亮度: 颜色的相对明暗程度 在Android中, ...
- 【转】上传jar包到nexus私服
原文:https://my.oschina.net/lujianing/blog/297128 1通过网页上传 这种方法只是上传了jar包.通过maven引用当前jar,不能取得jar的依赖 from ...
- 分享一个ASP.NET的弹出层,比较好用!
网上的一些弹出层的控件多了去了,我很久之前用了一个,效果还不错,但如果应用到ASP.NET的话,会出现“弹出层内的控件runat='server'失效”的情况,具体情况我也不太会描述,但就是那些onc ...
- javaSE web开发 登录思路代码
准备工作: 1.在WebContent WEB-INF lib下添加c3p0-0.9.5.2.jar mchange-common-java-0.2.11.jar ojdbc6.ja ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- Oracle分析函数巧妙使用
在 Oracle中使用Sql必须弄懂分析函数 Oracle开发专题之:分析函数(OVER) 1 Oracle开发专题之:分析函数2(Rank, Dense_rank, row_number) 6 Or ...
- html input file accept
*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video*.ac3 audio/ac3 AC3 Audio*.asf allpication/vnd.ms-asf ...
- opacity(透明度)属性设置
1.opacity:是属性,整个元素包含子元素全部都会透明,取值范围0-1; 2.background-color:rgba(0,0,0,.5)rgba是值,用于背景,取值范围0-1. 补充:a-al ...
- css动画Demo---水波动画和边框动画
先上效果图: 水波动画: 边框动画: 1.水波动画 实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...
- MongoDB可视化工具RoboMongo
官网下载安装包:https://robomongo.org/download (开始使用的是mongoVUE,研究半天,最后发现貌似已经挂掉了,坑!后来上手的robomongo) 安装没什么说的,一直 ...