vue中动态加载组件+开发者模式+JS参数值传递和引用传递
今天写vue里面通过接口反参动态加载组件时候 跟着同学。。。学习到了
一、先说说vue 内置组件 component 的用法
component组件可以来专门用来进行组件的切换,使用is来绑定你的组件名,本次系统写的比较简单。。。

此处::is='组件名'可以直接条用组件。
因为全页面有十个组件加载,所以用到了循环、数组。就遇到了在方法里可以打印数组里的值,但绑定组件名的地方获取不到的问题。

后来加上了一个数组b,并把b数组的值赋值给a。a就可以获取到了。就是实现了动态加载组件。
二、观察者模式
我需要遍历的数组值更新了,值也赋值了,为什么视图不更新?这个问题网上也有很多解释。
数组之所以获取不到是因为绑定中的观察者模式没有检测到b数组的改变,补习了一下观察者模式。https://blog.csdn.net/xidongdong1/article/details/78613654
意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
主要解决:一个对象状态改变给其他对象通知的问题,而且要考虑到易用和低耦合,保证高度的协作。
何时使用:一个对象(目标对象)的状态发生改变,所有的依赖对象(观察者对象)都将得到通知,进行广播通知。
如何解决:使用面向对象技术,可以将这种依赖关系弱化。
关键代码:在抽象类里有一个 ArrayList 存放观察者们。
在vue中model被定义为观察者,而view里面进行一处或多处依赖数据绑定即为观察者。https://www.cnblogs.com/pi-xia/articles/9351432.html中还列举了一些被观察者对观察者的控制方法。
当a赋值为b后才被观察者模式检测到,由此也补习了点JS参数值传递和引用传递的知识
三、JS参数值传递和引用传递
字符串、数字、布尔、数组、对象、Null、Undefined
由于js中的变量是松散类型的,所以它提供了一种检测当前变量的数据类型的方法,也就是typeof关键字.
typeof 123 //Number //NaN/isNaN
typeof 'abc' //String
typeof true //Boolean //true/false
typeof undefined //Undefined
typeof null //Object //被当一个空对象引用了
typeof { } //Object
typeof [ ] //Object
typeof console.log() //Function
三大引用类型:object /Array/Function (按存储类型)
值类型,复制值
引用类型,复制值,但其实是地址,实际上是指针。两个变量都保存了同一个对象地址,则这两个变量指向了同一个对象。因此,改变其中任何一个变量,都会相互影响

可以这样理解 数组里的值改变之后,观察者监听的是a的值,其实是地址,但地址值并没有改变。所以监听不到。而a[]=b[]后,地址值改变就监听到了。
下面的代码:
var a=[1,2,3]
function aaa(b){
b.push(4)
}
aaa(a)
alert(a)// [1,2,3,4]
这里b、a所指地址一样,所以b加了值4,a中的值也改变了。
此外,值类型赋值应该是存储的就是a1=3,这样的值。

这是我目前的理解,这都是以前看过的东西,没有深刻理解,就忘记了。基础的东西不应该忘呀!
有问题的地方欢迎指正。。。谢谢
vue中动态加载组件+开发者模式+JS参数值传递和引用传递的更多相关文章
- vue中动态加载img
想实现动态加载图片,当点击“首页”时,图片变色 代码如下: <mt-tabbar v-model="selected" fixed class="border-1p ...
- vue中动态加载图片路径的方法
assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...
- Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...
- C# 动态加载组件后怎么在开发环境中调试
动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定 ...
- vue动态加载组件
vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...
- VUE 动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
- Vue 动态加载组件
为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- 某APK中使用了动态注册BroadcastReceiver,Launcher中动态加载此APK出现java.lang.SecurityException异常的解决方法
在某APK中,通过如下方法动态注册了一个BroadcastReceiver,代码参考如下: @Override protected void onAttachedToWindow() { super. ...
随机推荐
- SpringBoot-@RequestParam
Request参数 在访问各种各样网站时,经常会发现网站的URL的最后一部分形如:?xxxx=yyyy&zzzz=wwww.这就是HTTP协议中的Request参数,它有什么用呢?先来看一个例 ...
- spring重要知识点总结
一.面向切面编程 配置applicationContext.xml文件 <beans xmlns="http://www.springframework.org/schema/bean ...
- Windows平台ping测试局域网所有在用IP
由于工作需要,我在家里搭建了很多VM,同时智能家居设备也占用了很多IP.平日偶尔会有确认局域网内哪些IP目前在用的需求. 这个需求很简单,直接从网上也可以搜索到很多答案,最终找到一个经实际测试可用的方 ...
- HBase笔记6 过滤器
过滤器 过滤器是GET或者SCAN时过滤结果用的,相当于SQL的where语句 HBase中的过滤器创建后会被序列化,然后分发到各个region server中,region server会还原过滤器 ...
- zw量化交易·实盘操作·系列培训班
参见: <zw量化交易·实盘操作·系列培训班> http://blog.sina.com.cn/s/blog_7100d4220102w0q5.html
- windows 如何创建硬链接
输入代码:mklink /d F:\ D:\pdf mklink /d 是命令语句,空格,接着是放置硬链接的位置,空格,再是目标文件夹.
- python核心技术
基本语法 Python的设计目标之一是让代码具备高度的可阅读性.它设计时尽量使用其它语言经常使用的标点符号和英文单字,让代码看起来整洁美观.它不像其他的静态语言如C.Pascal那样需要重复书写声明语 ...
- window 系统虚拟机安装mac系统
前言: 我们用的是虚拟机,物理机安装一是复杂,二是兼容性实在太差,所以不推荐使用,除非你的电脑配置不够.这篇文章很长,如果想安装的话建议收藏,否则你有可能记不住步骤,我尽量缩减步骤,所以如果你想安装黑 ...
- Reading Lines from File in C++
Reading Lines from File in C++ In C++, istringstream has been used to read lines from a file. code: ...
- [C++ Primer Plus] 第5章、循环和关系表达式(一)程序清单——指针自加减优先级
程序5.4 #include<iostream> using namespace std; ; void main() { long long factorials[Size]; fact ...