一、webStorage
(1) 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
(2) 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
(3) 相关API：
① xxxxxStorage.setItem('key', 'value') 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
② xxxxxStorage.getItem('person') 该方法接受一个键名作为参数，返回键名对应的值。
③ 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 @atguigu="test"/>或<Demo
v-on:atguigu="test"/>
② 第二种方式，在父组件中：
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
③ 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
mounted() {
//绑定自定义事件
this.$refs.student.$on('atguigu',this.getStudentName)
//绑定自定义事件（一次性）
// this.$refs.student.$once('atguigu',this.getStudentName)
},(4) 触发自定义事件：this.$emit('atguigu',数据)
(5) 解绑自定义事件：this.$off('atguigu')
(6) 组件上也可以绑定原生DOM事件，需要使用native修饰符。
<Student ref="student" @click.native="show"/>(7) 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
三、全局事件总线（GlobalEventBus）
(1) 一种组件间通信的方式，适用于任意组件间通信。
(2) 安装全局事件总线：$bus就是当前应用的vm
new Vue({
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this //开启全局事件总线
}
}).$mount('#app')(3) 使用事件总线：
① 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
App.vue绑定自定义事件
mounted(){
this.$refs.myfooter.$on('changeAll',this.changeAll)
console.log("=========================");
this.$bus.$on('checkTodo',this.checkTodo)
this.$bus.$on('deltodo',this.deltodo)
},② 提供数据：this.$bus.$emit('xxxx',数据)
Item.vue调用事件
methods: {
handleCheck(id){
// this.checkTodo(id)
this.$bus.$emit('checkTodo',id)
},
del(id){
// this.deltodo(id)
this.$bus.$emit('deltodo',id)
}
},(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) //订阅消息
}
(3) 提供数据：pubsub.publish('xxx',数据)
methods: {
del(id){
pubsub.publish('deltodo',id)
}
},(4) 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。
五、nextTick
(1) 语法：this.$nextTick(回调函数)
(2) 作用：在下一次 DOM 更新结束后执行其指定的回调。
(3) 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
//编辑
handleEdit(todo){
if(todo.hasOwnProperty('isEdit')){
todo.isEdit = true
}else{
// console.log('@')
this.$set(todo,'isEdit',true)
}
this.$nextTick(function(){
this.$refs.inputTitle.focus()
})
},回复vue，可以获得全套笔记