前端 Vue 应该知道的一些东西，个人笔记 2021-11-26

前端代码编写规范及es6常用语法

1. 命名规范

文件夹名称，文件名称，组件名称，统一使用大驼峰或者 小横线方式命名；
组件文件名: list-item.vue.或者ListItem.vue;
基础的无状态的通用组件加V Base App前缀 
BaseButton  AppButton 在html中 <base-button> 或者 <BaseButton>
url路径名：小横线方式命名如：https://www.antdv.com/docs/vue/introduce-cn/

2. data数据写法注意，小驼峰命名，用函数返回对象，如果直接用对象会导致复用时，公同一个data数据，引起所以组件的改变；实例：

data() {
    return{ }
}

3. 组件prop使用，定义要详细，前两种少用，推荐第三种用法

props: [ 'dataSource'];
props: {
	dataSource: Array
}
props: {
	dataSource: {
		type: Array,
		required: true,
		default:()=>[]
	},
	collected: {
		type: Boolean,
		default: ()=> false
	}
}

4. 使用v-for循环渲染元素时，必须要有key，且key值唯一；v-for和v-if不要同时用在同一个元素内（v-for比v-if有更高的优先级）

<div v-if="show">
	<div
		v-for="item in arr" 
		:key="item.id"
	>
	</div>
</div>

5. 元素有多个 attribute 应该分多行撰写，每个 attribute 单独一行；例如

<!--表单区域-->
<a-drawer
	title="操作"
	:width="650"
	:visible="visible"
	:body-style="{ paddingBottom:'80px'}"
	destroyonClose
	@close="onClose"
>
	<jzsb-form
		:zd-list="zdList"
		:detail="detail"
		:spsb="spsb"
		:zfdz="zfdz"
		:groups="groups"
		@handleEnter="handleEnter"
		@handleEnterZfdz="handleEnterZfdz"
		@handleAddZfdz="handleAddZfdz"
		@onClose="onClose"
	/>
</a-drawer>

6. 指令缩写

指令缩写
: => v-bihd: (.sync修饰符)
@ => v-on: ( .stop .prevent 修饰符)
# => v-slot:

vue路由机制（动态路由，静态路由）

前端组件的编写及使用

1. vue组件基本构成

<template>
	<div>
		<div>内容</div>
	</div>
</template>
<script>
export default {
	name: 'TestDemo ' ,
	components : {
	},
	mixin: [],
	props: {
		propName: {
			type: Number,
			default:()=> 0
		}
	},
	data() {
		return {}
	},
	computed: {
	},
	watch: {
		data (newValue, oldvalue) {
		}
	},
	created: {
	},
	mounted: {
	},
	methods: {
	}
}
</script>
<style scoped>

</style>

2. template中html，动态给class和stype赋值；

<template>
	<div>
		<div
			:class="{'active': showClass}"
			:style="styleData"
		>内容</div>
	</div>
</template>
<script>
export default {
	name: 'TestDemo' ,
	components : {
	},
	mixin: [],
	props: {
		propName: {
			type: Number,
			default:()=> 0
		}
	},
	data() {
		return {
			showClass: true,
			styleData:{
				height: '100px'
			}
		}
	},
	computed: {
	},
	watch: {
		data (newValue, oldvalue) {
		}
	},
	created: {
	},
	mounted: {
	},
	methods: {
	}
}
</script>
<style scoped>

</style>

3. slot插槽用法和具名

<!--子组件-->
<template>
<div>
	<slot></slot>
</div>
</template>
<script>
export default {
	name: 'TestDemo'
}
</script>

<!--父组件-->
<template>
    <div>
        <text-demo>
            <div>123456</div>
        </text-demo>
    </div>
</template>

<!--子组件-->
<template>
<div>
	<slot name="name"></slot>
	<slot name="sex"></slot>
</div>
</template>
<!--父组件-->
<template>
    <div>
        <text-demo>
            <div slot="name">张三</div>
            <div slot="sex">男</div>
        </text-demo>
    </div>
</template>

4. ref的使用

<template>
	<div>
		<test-demo ref="test"></test-demo>
	</div>
</template>
<script>
export default {
	name: '父组件' ,
	created {
		// 调用test-demo的组件中loadDate(), 
		this.$refs = loadData();
	},
	mounted {
	},
	methods: {
	}
}
</script>

5. style中scoped含义 /deep/ .class 的含义和用法,把 /deep/ 换成 >>> 也可以达到同样的效果

<style scoped lang="less">
.list {
    position: relative;
    width: 100%;
    min-height: calc( 100vh - 80px);
    background: #FFFFFF;
    margin-left: 10px;
    padding-right: 10px;
}
/deep/ .ant-card-body {
	padding: 12px 12px 12px 0;
	text-align: right;
}
</style>

es6常用语法

1. 使用let 和 const 代替var来声明变量和常量；
2. 变量的结构赋值和扩展运算符 （…）

let [a, b, c] = [1,2,3](变量位置相同)
let {a, b, c} = (b: '1', c: '2', a: '3'} (变量和属性名相同)

let {a, a: (b}} = {a: {b: '123'}}
a => {(b: '123'}
b => '123'

用扩展运算符赋值
const obj = {fb: '1', c: '2', a: '3'}
const temp = {...obj， d: '4'};
temp => {(b: '1', c: '2', a: '3',d: '4'}

模板字符串
const name = 'LC' ;
const str = "我的名字叫:" + name; => `我的名字叫: ${name} ;

函数的扩展
参数可赋初始值
function fun(x = 1, y){}

箭头函数:(res) =>{} --》 function(res){}
(res)=>(res + 1) --》  function(res) { return: res + 1}
箭头函数不会改变this的指向


循环遍历函数
arr.map(item =>())有返回值
arr.forEach(item => {
})

对象的扩展
object.is(a,b) 比较两个值是否相等类似 ===
Object.assign({}, {a: '1'},{b: '1'})合并对象

Promise对象，异步编程

// 常用场景，同时发起多个异步请求，监测所有请求都完毕；
const p1 = new Promise((resole, reject => {
// ...async code
}));
const p2 = new Promise((resole, reject =>{
// ...async code
}));
const p3 = new Promise((resole, reject => {
// ...async code
}));
Promise.a11([p1,p2,p3]).then(res).catch(err)

Js中可能导致内存泄露的地方

::: tip 关于js内存管理机制
像C语言这样的底层语言一般都有底层的内存管理接口，比如 malloc()和free()。相反，JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。
:::

1. 意外的全局变量；局部变量在不用的时候会自动回收，而全局变量会一直占用内存；当有未定义的变量时，因为JavaScript 处理未定义变量的方式比较宽松：未定义的变量会在全局对象创建一个新变量。在浏览器中，全局对象是 window ；如

function foo(arg) {
	bar = 'this is a hidden global variable';
}
// 真相是:
function foo(arg) {
 window.bar = 'this is an explicit global variable';
}

2. 计时器，在不需要时要手动停止；如：

// 创建计时器
activated () {
	console.log('activated');
	timer = setInterval(()=>{
		this.loadData();
	}, 30000);
},
// 消除计时器
deactivated() {
	console.log('deactivated');
	clearInterval(timer);
}

3. 脱离DOM的引用；当把创建DOM存到对象或者数组中时，此时DOM的引用存在两个地方，一个是DOM树，一个是对象或者数组中；如：
   
4. 添加事件监听(addEventListener())，当页面销毁或不需要时一定要手动移除事件的监听(removeEventListener())；如：
   
   
5. 转换url的createObjectURL(data)方法，url用完后要手动调用revokeObjectURL(url)，否则会导致data占用的内存不能释放；如：