组件的生命周期、组件的数据共享、ref的引用、watch监听器

生命周期

生命周期：是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段
生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行，它强调的是一个时间点

组件的生命周期分类

组件的第一个阶段

创建阶段：new Vue() -> beforeCreate() -> created() -> beforeMount() -> mounted

组件的第二个阶段

运行阶段：beforeUpdate() -> updated

组件的第三个阶段

销毁阶段：beforeDestroy -> destory

组件之间的数据共享

父组件 -> 子组件

父组件向子组件共享数据需要使用自定义属性

子组件 ->父组件

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

兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus
EventBus 的使用步骤
① 先创建 eventBus.js模块，并向外共享一个Vue实例对象
② 在数据的发送方，调用bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件
③ 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件

后代关系组件之间的数据共享

后代关系组件之间共享数据，指的是父节点的组件向子孙组件共享数据，可以使用provide和inject实现
1、父节点的组件可以通过 provide 方法，对其子孙组件共享数据

2、子孙节点可以使用 inject 数组，接收父组件向下共享的数据

3、父节点对外共享响应式的数据

ref 的引用

什么是 ref 引用

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。（通俗点就是获取DOM元素）
每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象

使用 ref 获取DOM 元素

使用 ref 引用组件实例

控制文本框和按钮的按需切换

通过布尔值 inputVisible来控制组件中的文本框与按钮的按需切换

让文本框自动获得焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的
.focus() 方法即可

this.$nextTick(cb) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的
DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素

watch监听器

基本语法

场景：使用watch检测用户名是否可用

监听 username 值得变化，并使用 axios 发起 ajax 请求，检测用户名是否可用

immediate 选项

默认情况下，组件在初次加载完毕后时不会调用 watch 监听器，如果想让 watch 监听器立即被调用，则需要使用 immediate 选项

deep选项

当 watch 监听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到，此时需要使用 deep 选项

监听对象单个属性的变化

只监听对象中单个属性的变化