了解Vue组件、生命周期

一、组件
1、什么是组件？
    是一个功能高内聚、业务低耦合的模块，其抽取相同功能为一个独立模块，提高代码复用率，在vue中一切皆组件。
2、封装一个组件的思路
	有相同的业务数据需要处理---抽取组件（需数据传递）---定义数据、方法等
  自定义组件方式：
 (1) const app = Vue.createApp({
        data,
        methods:{},
        components:{		
            'my-panel': MyPanel   //局部注册
        }
      })
  (2)也可使用app.component()方法进行单个注册
   	  app.component('my-panel', MyPanel)   //全局注册

二、生命周期 lifecycle
   1、表示组件从创建到销毁的过程， 可在程序的不同阶段，做不同的业务
2、底层原理：
   class Test {
       val = 0
       constructor({beforeCreate，updated}){        //对象的传参是无序的
		  if(!!beforeCreate)  beforeCreate()
           console.log('---do something')
           this.updated = updated
        }
   }
   new Test({
       beforeCreate(){
           console.log('在构造函数处理之前做的事')
       }
   })
3、阶段划分
   4个阶段：创建-create、挂载-mount、更新-update、销毁-destory(Vue2)| 卸载-unmount(Vue3)
   8个生命周期：每个阶段的之前之后, 
    （1)beforeCreate：几乎不用
	  **created**：vue组件实例构造完成，数据已经绑定到 VM(View-Model) 层，if存在异步赋值(promise、seTimeout等)，会二次渲染触发更新
     (2)beforeMount：无用
      **mounted**：挂载之后，可获取页面节点，在此赋值会导致二次渲染，触发更新
     (3)beforeUpdate：更新之前
       updated：只有当数据绑定到dom节点后，页面重新渲染时才会触发更新生命周期
     (4)**beforeDestory**：常用于销毁定时器  Vue2
        destoryed：销毁之后   
     (4)**beforeUnmount**：卸载之前	  Vue3
		unmounted：卸载之后

补充：ref属性
  在vue中，没有具体元素，都是虚拟dom，不允许直接获取元素节点，应采用关联属性ref来关联真实dom和虚拟dom ---> this.$refs