Vue3 生命周期 && Hooks封装 && toRef

# 一、Vue3.0与Vue2.0生命周期改动
    beforDestroy改名为beforeUnmount
    destroyed改名为unmounted
    # Vue3.0页提供了Composition API形式的生命周期钩子，与Vue2.x中猴子对应关系如下：
        import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
        beforeCreate     ====> setup()
        created     ====> setup()
        beforeMount     ====> onBeforeMount
        mounted     ====> onMounted
        beforeUpdate     ====> onBeforeUpdate
        updated     ====> onUpdated
        beforeUnmount     ====> onBeforeUnmount
        unmounted     ====> onUnmounted
    # 注意：
        # 1.setup函数中如何编写生命周期钩子：setup(){onBeforeMount(()=>{console.log('onBeforeMount被调用了！');})}
        # 2.你可以直接通过配置项去配置生命周期（也就是不通过setup中Composition API的形式编码生命周期回调，直接和Vue2.x中一样配置）
        # 3.当你setup中编写了生命周期回调，同时配置项中也配置了生命周期函数的时候，Vue3.0是默认先调用Composition API的形式编码生命周期回调，然后在调用配置项中的生命周期回调。
# 二、自定义hook函数
    # 1.什么是hook函数？     ——  本质是一个函数，把setup函数中使用的Composition API进行了封装。
    # 2.类似于Vue2.x中的mixin混入。
    # 3.自定义hook的有事：复用代码，让setup中的逻辑更清楚易懂。
    # 举个例子：
        # /hooks/usePoint.js     把单独的功能或业务独立封装一个文件
        import {reactive, onBeforeUnmount, onMounted} from 'vue'

    export default function (){
        let mPoint = reactive({
        x: 0,
        y: 0
        })
        function savePoint(event){
        mPoint.x = event.pageX;
        mPoint.y = event.pageY;
        console.log('savePoint');
        }
        onMounted(()=>{
        console.log('onMounted');
        window.addEventListener('click', savePoint);
        
        });
        onBeforeUnmount(()=>{
        console.log('onBeforeUnmount');
        window.removeEventListener('click', savePoint);
        });
        return mPoint;
    }
    # Demo.vue
    <template>
      <h2>sum的值：{{sum}}</h2>
      <button @click="sum+=1">点我＋1</button>
      <hr>
      <div>鼠标点击的坐标是：({{mPoint.x}},{{mPoint.y}})</div>
    </template>

    <script>
    import {ref} from 'vue'
    import savePoint from '../hooks/usePoint.js'  // 引入封装好的功能
    export default {
      name: 'HelloWorld',
      setup(props, context){
        let sum = ref(0);
        let mPoint = savePoint(); // 然后安装功能
        return {
          sum,
          mPoint  // 暴露它，你就可以显示在页面上了
        }
      }
    }
    </script>
# 三、toRef函数
    # 1.作用：创建一个ref对象，其value值指向另一个对象中的某个属性
    # 2.语法：const name = toRef(pserson, 'name')
    # 3.应用：要将响应式对象中的某个属性单独提供给外部使用时。
    # 4.扩展：toRefs与toRef功能一直，但可以批量创建多个ref对象，语法：toRefs(person)
    # 例子：
        <template>
      <h3>姓名：{{name}}</h3>
      <h3>年龄{{age}}</h3>
      <h3>薪资：{{job.j1.salary}}K</h3>
      <button @click="name+='~'">修改姓名</button>
      <button @click="age++">年龄增长</button>
      <button @click="salary++">涨薪</button>
    </template>

    <script>
    import {reactive, toRef, toRefs} from 'vue'
    export default {
      name: 'HelloWorld',
      setup(props, context){
        let person = reactive({
          name: '张三',
          age: 18,
          job:{
        j1:{
          salary: 30
        }
          }
        });

        return {
          salary: toRef(person.job.j1, 'salary'),
          ...toRefs(person)
        }
      }
    }
    </script>