Vue2.0介绍（二）

一、生命周期

将要创建 ===> 调用beforeCreate函数
创建完毕 ===> 调用created函数
将要挂载 ===> 调用beforeMount函数
挂载完毕 ===> 调用mounted函数（重要钩子）
将要更新 ===> 调用beforeUpdate函数
更新完毕 ===> 调用updated函数
将要销毁 ===> 调用beforeDestroy函数（重要钩子）
销毁完毕 ===>调用destroyed函数

二、Vue组件化编程

1.模块

理解：向外提供特定功能的js程序，一般就是一个js文件。
作用：复用js，简化js的编写，提高js运行效率。

2.组件

理解：用来实现局部（特定）功能效果的代码集合（html\css\js\image…）
作用：复用编码，简化项目编码，提高运行效率。

3.模块化

当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。

4.组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

三、关于不同版本的Vue

vue.js与vue.runtime.xxx.js的区别
（1）vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）vue.runtime.xxx.js是运行版的Vue,只包含：核心功能，没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

四、ref属性

1.被用来给元素或子组件注册引用信息（id的替代者）
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VueComponent）。
3.使用方式
打标识：<Dome ref="xxx"></Dome>
获取：this.$refs.xxx

五、props配置项

功能：让组件接收外部传过来的数据。

传递数据：

<Demo name="xxx"/>

接收数据：
1.只接收数据：

props:['name']

2.限制数据类型：

props:{name:String}

3.完整限制：

props: {
	name: {
		type:String, // 类型
		required:true,//必要性
		default:'展示',//默认值
	}
}

六、mixin（混入）

功能：可以把多个组件公用的配置提取成一个混入对象。

使用方式：
第一步定义混合，例如：

{
 data() {.....},
 methods() {......},
.....
}

第二步使用混入，例如：
（1）全局混入：Vue.mixin(xxx)
（2）局部混入：mixins:['xxx']

七、插件

功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是vue，第二个以后的参数是插件使用者的数据。

定义插件：

对象.install = function(Vue, options){
        // 添加全局过滤器
        Vue.filter(...)
        // 添加全局指令
        Vue.directive(...)
        // 配置全局混入
        Vue.mixin(...)
        // 添加实例方法
        Vue.prototype.$myMethod = function() {...}
        Vue.prototype.$myProPerty = xxx
}

使用插件：Vue.use()

八、scoped样式

作用：让样式在局部生效，防止冲突。

写法：<style scoped></style>

九、webStorage

1.存储内容大小一般支持5M左右（不同浏览器可能不一样）。
2.浏览器端通过Windows.sessionStorage和Windows.localStorage属性实现本地存储机制。
3.相关API：
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值添加到存储中，如果键名存在，则更新其对应的值。
xxxxxStorage.getItem('key');
该方法接受一个键名作为参数，返回键名对应的值。
xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数，并把该键名从存储中删除。
xxxxxStorage.clear();
该方法会清空存储中的所有数据。
4.备注
sessionStorage存储的内容会随着浏览器窗口关闭而消失；
localStorage存储的内容，需要手动清除才会消失;
xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null;
JSON.parse(null)的结果是null。

十、组件的自定义事件

1.一种组件间通信的方式，适用于：子组件 ===> 父组件。
2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3.绑定自定义事件：
第一种方式：在父组件中：<Demo @dhlsp="test"/>或<Demo dhlsp="test"/>
第二种方式：在父组件中：

<Demo ref="xxx"/>
......
mounted() {
	this.$refs.xxx.$on('dhlsp',this.test);
}

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
4.触发自定义事件：this.$emit('test',data)
5.解绑自定义事件：this.$off('test')
6.组件上也可以绑定原生DOM事件，需要使用native修饰符。
7.注意：通过this.$refs.xxx.$on('test',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会指向Windows。

十一、全局事件总线（GlobalEventBus）

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线：

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this // 安装全局事件总线，$bus就是当前应用的Vue实例对象
	}
	......
})

3.使用事件总线：

接收数据：A组件接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

	methods() { 	
		demo(data) {.....}
	} 
	...... 
	mounted() {
		this.$bus.$on('xxx',this.demo) 
	}

提供数据：this.$bus.$emit('xxx',data)

4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

十二、消息订阅与发布（pubsub）

1.一种组件间通信的方式，适用于任意组件间通信。
2.使用步骤：

安装pubsub:npm i pubsub-js
引入：import pubsub from 'pubsub-js'
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件中。

 	methods() { 	
		demo(data) {.....}
	} 
	...... 
	mounted() {
		this.pid = pubsub.subscribe('xxx',this.demo) // 订阅消息 
	}

4.提供数据：pubsub.publish('xxx',data)
5.最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)去取消订阅。

十三、nextTick

1.语法：this.$nextTick(回调函数)
2.作用：在下一次DOM更新结束后执行其指定的回调。
3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

十四、插槽

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适应于父组件 ===> 子组件。
2.分类：默认插槽、具名插槽、作用域插槽。
3.使用方式：

1.默认插槽：

父组件中：
	<Demo>
		<div>html结构</div>
	</Demo>
子组件中：
	<template>
		<div>
			<!-- 定义插槽 -->
			<slot>插槽默认内容...</slot>
    	</div> 
    </template>

2.具名插槽

父组件中：
	<Demo>
		<template slot="center">
			<div>html结构1</div>
		</template>
		<template v-slot:footer>
			<div>html结构2</div>
		</template>
	</Demo>
子组件中：
	<template>
		<div>
			<!-- 定义插槽 -->
			<slot name="center">插槽默认内容...</slot>
			<slot name="footer">插槽默认内容...</slot>
    	</div> 
    </template>

3.作用域插槽：
理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由APP组件决定）
具体编码：

      <template scope="scpoeDate">
        <!-- 生成的是ul列表 -->
        <ul>
          <li v-for="g in scpoeDate.games" :key="g"></li>
        </ul>
      </template>
    </Category>
    <Category>
      <template slot-scope="scpoeDate">
        <!-- 生成的是h4标题 -->
        <h4 v-for="g in scpoeDate.games" :key="g">{{g}}</h4>
      </template>
    </Category> 子组件中： 	<template> 	  <div>
	    <slot :games="games"></slot> 	  </div> 	</template>

	<script> 		export default {
		  name: 'Category',
		  data() {
		    return {
		      games: ['test1', 'test2', 'test3']
		    }
		  } 		}; 	</script> ```