【VUE】2022.6.8 今日所学

一.v-for循环中涉及到图片时，无法正常显示

在v-for中，调用本地图片时

<div  v-for="item in items" :key="item.index">

<img :src="item.url" alt="" />

</div>

data中设置

 url:"../assets/炸鸡腿.jpg"

调用失败，不显示图片，其实之前就出现过这种情况，原因是需要require进行调用。改成如下代码可以实现成功调用：

 url:require("../assets/炸鸡腿.jpg")

 

对具体内容进行了解后，我还是不太懂，不过时有两种解决方法，一种就是如上所示，利用require确定路径引入。

另外一种就是import引入。

参考：import和require的区别 - 孙首富 - 博客园 (cnblogs.com)

1. 通过require引入基础数据类型时，属于复制该变量。

2. 通过require引入复杂数据类型时，数据浅拷贝该对象。

3. 出现模块之间的循环引用时，会输出已经执行的模块，而未执行的模块不输出（比较复杂）

4. CommonJS模块默认export的是一个对象，即使导出的是基础数据类型

二.赋值、浅拷贝、深拷贝

首先要对JS基本数据类型了解，对于基本数据类型，是赋值。

可以简单理解为基本数据类型每定义一个，就在栈内存放了一个。而复杂数据类型，则是在栈内存储地址，对应到堆内具体的一个数据，每新定义一个，则是多一个对应关系。

参考： 一文教你区分赋值、浅拷贝和深拷贝，手撕浅拷贝与深拷贝函数_Concise200的博客-CSDN博客_赋值是浅拷贝吗

（个人理解：浅拷贝，即复杂数据类型赋值后仍存在引用关系；反之，深拷贝即整个深层次的拷贝，出现两个东西，而不存在任何引用关系）

三.VUEX相关