项目问题日志及解决 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第8天 本文总共总结了如下几个知识点：export和export default ；Vue dataset方式数据绑定； 深拷贝。

export和export default的区别

1. 这两个东西都是用来将js文件中的，常量，函数，文件，模块等导出的
2. 在其他文件中用 import将其暴露的东西刀入
3. 在一个文件或者模块中，export，import可以有多个。但是export default只能存在一个
4. 通过export导出的内容，在导入时，需要加 {}，且必须是导出时的名字，不能是自定义的名字
5. 通过 export default导出的内容，是默认导入的内容，且可以自定义名字

常规导入

//export.js
//定义模块私有成员
let n1 =10
let n2 =20
//定义模块私有方法
function show(){
    return "hello"
}
//export导出
export let s1 = "aaa"
export {n1, n2, show}

//import.js
import {s1} from "./export.js" //按需导入，同时 {} 不可少
import {n1, n2, show}
console.log("s1:",s1)
console.log("n1:",n1)

默认导入

自定义名字

//export.js
//定义模块私有成员
let n1 =10
let n2 =20
//定义模块私有方法
function show(){
    return "hello"
}
//export导出
export default n1

//import.js
import xxx from './export.js'
console.log(xxx)
//得到n1的结果

默认导出多个内容

//export.js
//定义模块私有成员
let n1 =10
let n2 =20
//定义模块私有方法
function show(){
    return "hello"
}
//export导出 导出多个时加括号
export default {n1,n2,show}

//import.js
import xxx from './export.js'
console.log(xxx.n1)
console.log(xxx.n2)
console.log(xxx.show())

Vue dataset方式数据绑定

1. 在vue项目中可以在元素上使用:data-"数据名" = "值"来绑定数据
2. 再通过 元素.dataset.元素名来获取数据的值

这个方法今天在项目中使用到了。

在元素上使用这个方法。绑定的数据名是index 。值是 元素的key值

获取元素之后，通过.dataset.数据名 来获取。 除了我这里的e.target可以使用，只要是可以获取到元素的方法都可行。这个dataset是保存为dom元素的属性的

深拷贝

做项目，在要使用vuex添加一个大的对象时，直接保存的话结果是一个object，保存不了完整的数据。就想到了运用深拷贝。把对象完整的拷贝下来保存。 原理就是：判断值是否为对象，如果是对象就把这个值遍历，其中的非对象值就可以存到一个自定义的数组或对象中，作为结果，再如此递归。