个人理解 Vue2 与 Vue3的一些区别

首页 / 正文

生命周期

vue2     --------------- vue3
beforeCreate                         ->   setup()
Created                                 ->   setup()
beforeMount                          ->   onBeforeMount
mounted                                ->    onMounted
beforeUpdate                        ->    onBeforeUpdate
updated                                 ->    onUpdated
beforeDestroyed                    ->    onBeforeUnmount
destroyed                              ->     onUnmounted
activated                                ->     onActivated
deactivated                            ->     onDeactivated

vue2定义数据变量是data(){},创建方法要在methods:{},而在vue3中直接在setup(){}中,定义数据以及方法,然后return

 <script>
  import {reactive,toRefs,} from 'vue'
  export default{
    name:'init',//模板名称
    //setup相当于vue2中的 beforecreate和create 
    setup() {
      const data = reactive({
        data_1:''
      })
      const handapp = () =>
        {
           console.log('进入事件');
        }
      
      return {
      ...toRefs(data),
        handapp
    }
    }
  
  }
  </script>
     <style scoped>
       
     </style>

vue3删除了this的使用

Vue
打赏
评论区
头像