vue3.js
    总结: 此处涉及的vue3新特性
    vue2中生命周期使用选项式API,直接写在vue组件配置对象中
    vue3中生命周期使用组合式API,写在setup函数中, 用Vue调用
    vue3不再使用beforeCreate 和 created
    vue3中的销毁函数由destroy 改成 unmount
    vue3生命周期.jpg

    1. <body>
    2.     <script src='./vue3.js'></script>
    3.     <div id='myApp'> 
    4.         <button @click="count++">{{count}}</button>
    5.     </div>
    6.     <script>
    7.         var vm = {
    8.             data(){ return{ count: 0 } },
    9.             // vue2的生命周期函数(vue3中依然可用没有废除)
    10.             beforeCreate() { console.log('vue2', "beforeCreate") },
    11.             created() { console.log('vue2', "created") },
    12.             beforeMount() { console.log('vue2', "beforeMount") },
    13.             mounted() { console.log('vue2', "mounted") 
    14.                 // this.$destroy();  vue3废除了$destroy函数
    15.             },
    16.             beforeUpdate() { console.log('vue2', "beforeUpdate") },
    17.             updated() { console.log('vue2', "updated") },
    18.             beforeDestroy() { console.log('vue2', "beforeDestroy") },
    19.             destroyed() { console.log('vue2', "destroyed") },
    20.             setup() {
    21.                 // setup函数在beforeCreate生命周期钩子之前调用, 不能用this
    22.                 console.log('setup', this)  // setup window
    24.                 // vue3建议在setup中实现生命周期函数调用, 如下: 
    25.                 // beforeCreate 和 created 在vue3已经不再使用
    26.                 Vue.onBeforeMount(()=>{
    27.                     console.log("vue3", "onBeforeMount")
    28.                 })
    29.                 Vue.onMounted(() => {
    30.                     console.log("vue3", "onMounted") 
    31.                 })
    32.                 Vue.onBeforeUpdate(() => {
    33.                     console.log("vue3", "onBeforeUpdate") 
    34.                 })
    35.                 Vue.onUpdated(() => {
    36.                     console.log("vue3", "onUpdated") 
    37.                 })
    38.                 Vue.onBeforeUnmount(() => {
    39.                     console.log("vue3", "onBeforeUnmount") 
    40.                 })
    41.                 Vue.onUnmounted(() => {
    42.                     console.log("vue3", "onUnmounted") 
    43.                 })
    44.             }
    45.         }
    46.         Vue.createApp(vm).mount('#myApp')
    47.         // vue3中不能使用vm调用组件中的数据了
    48.         console.log(vm.count, vm.$data)
    49.     </script>
    50. </body>