分享vue3与vue2的部分区别的相关知识，其中包括生命周期变化、实例变化以及方法变化等等。

1. 生命周期的变化：3.x(上） 2.x（下）
   
   

   

2. 不难看出，vue3.0与vue2.0之间生命周期函数在销毁的时候有变化：
   
   
   
   beforeDestroy --> beforeUnmount
   
   destroyed --> unmounted
   
   
   其他的区别主要在于书写使用的语言上的差别
   
   在ts中使用 class 类组件书写可以 参考 vue-class-component 或者 vue-property-decorator
   
   书写的风格和vue2.0的选项式区别不大。
   
   如果使用js书写代码 则应当使用组合式。
   
   具体变化带来的问题，会在下面的组合式写法中讲解。
   
   3.定义全局变量的方法变化
   
   // 之前(Vue 2.x)
   
   Vue.prototype.$http = () => {}
   
   Vue.prototype.url= 'http://123'
   
   // 之后(Vue 3.x)
   
   const app = createApp({})
   
   app.config.globalProperties.$http = () => {}
   
   app.config.globalProperties.url= 'http://123'
   
   4.创建vue实例变化
   
   
   //=======vue3.x
   
   //使用createApp函数来实例化vue，
   
   //该函数接收一个根组件选项对象作为第一个参数
   
   //使用第二个参数，我们可以将根 prop 传递给应用程序
   
   import { createApp } from 'vue'
   
   import App from './App.vue'
   
   import router from './router'
   
   import store from './store'
   
   createApp(App,{ userName: "blackLieo" })
   
   .use(store)
   
   .use(router)
   
   .mount('#app') 
   
   //由于 createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法，这些方法可以在以下部分中找到。
   
    
   
   //=======vue2.x
   
   import Vue from 'vue'
   
   import App from './App.vue'
   
   import router from './router'
   
   import store from './store'
   
    Vue({
   
     router,
   
     store,
   
     render: h => h(App)
   
   }).$mount('#app')
   
   5.插槽使用变化
   
   
   //================vue2.0使用插槽基本上直接使用slot进行操作//其中vue2.0经历了两次更迭，2.6.0版本slot升级为v-slot

3. 
   

     // 具名 作用域插槽

     //默认插槽

//父组件调用该组件

    

    // 作用域插槽

    

 

 

  

 //==============vue3.0使用插槽//在vue3.0中，插槽使用v-slot 简写用#

    

    //作用域插槽

    //一个组件里面具有多个插槽时，一定要带上名称，否则可能会导致作用域错乱

5.自定义指令
在 Vue 2 中实现一个自定义指令：

1

2

3

4

5