scoped使用

• 原理是在每个组件的元素里都设置一个独特的属性，避免样式冲突

<style lang='less' scoped></style>

• 当使用组件第三方样式库的时候，如果有修改样式的需求，使用/deep/标签

/deep/ h5{ background:red }

组件实例

• 需要以标签的形式调用组件，他才是一个实例

生命周期

• 指的是一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。
• 生命周期函数是内置函数，会伴随组件的生命周期，自动按次序执行

1. 组件创建阶段

• 创建之前--beforeCreate -组件的props/data/methods都未创建
• 内存创建完成--created-组件的props/data/methods都创建，模板尚未创建--非常常用，经常在他里边调用methods中的方法，请求服务器的数据，并将数据转存到data中，供template模板渲染使用
• 渲染之前--beforeMount
• 渲染以后--mounted--如果要操作当前组件dom，最早在mounted执行

2. 组件运行阶段

• 更新之前--beforeUpdate
• 更新以后--updated--为了数据变化后能够操作最新的dom结构，必须把代码写在updated生命周期函数中

3. 组件销毁阶段

• 销毁之前--beforeDestory
• 销毁以后--destroyed

组件之间的数据共享

1. 父子关系

• 父组件向子组件共享数据

<left :msg='message' :user='userinfo'></left>
props:['msg','user']

• 子组件向父组件共享数据-- 使用自定义事件

1. this.$emit('add',this.count)
2. <son @add='addnum'></son>
3. methods:{addnum(val){this.countnum=val}}

2. 兄弟关系

• EventBus

1. 创建eventbus.js模块，并向外共享一个Vue的实例对象
2. 在数据发送方，调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
3. 在数据接收方，调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件

ref

• ref获取某个确定的dom元素

<h1 ref='myh1'>跟组件</h1>
methods:{
	show(){
    	this.$refs.myh1.style.color='red'
    }
}

• $nextTick(cb)用来延后处理

数组的方法回顾

1. some 比foreach节约性能

arr.some(item,index)=>{
	if(item == 'a'){
    	console.log(index);
      // 通过return true方法来终止循环，
      return true
    }
}

2. every方法 --判断是否每一项都是某个值

const man=array.every(item=>item.state)

3. reduce方法 --.reduce((sum,item)=>{},初始值)

arr.reduce((sum,item)=>{
	 return sum+=item.price*item.count
},0)