vue3.0的变化与2.0的区别【一】

生命周期的变化

vue3.x的生命周期

 vue2.x

 

 对比之下可以看出来vue3.0和vue2.0之间生命周期函数在销毁的时候有区别

beforeUnmount -->beforeDestroy
unmounted-->destroyed

定义全局变量的方法变化

vue2.x

Vue.prototype.$axios = () => {}

vue3.x

const app = createApp({})
app.config.globalProperties.$axios = () => {}

创建vue实例化

vue2.x

import Vue from 'vue'
import App from './App.vue'
import router from './router'
 Vue({
  router,
  render: h => h(App)
}).$mount('#app')

vue3.x


　//使用createApp函数来实例化vue

//该函数接收一个根组件选项对象作为第一个参数
//使用第二个参数，我们可以将根 prop 传递给应用程序

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
var app = createApp(App)
app.use(router)

app.mount('#app')  //由于 createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法。



插槽使用变化


vue2.x



vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 ：v-slot 指令。
它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。
但是将会在vue 3 中，这两个指令将会被废弃



子组件



 



父组件






vue3.x



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

    
   
   



    
    //作用域插槽
    

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



自定义指令


vue2.x



// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})


在 Vue 2 中， 自定义指令通过以下几个可选钩子创建：


bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。


inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。


update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。


componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。


unbind：只调用一次，指令与元素解绑时调用。


 



vue3.x



const { createApp } from "vue"

const app = createApp({})
app.directive('focus', {
    mounted(el) {
        el.focus()
    }
})



双向数据绑定


 vue2.x


VUe2.0通过Object.definePropety来劫持对象属性的getter和setter操作，当数据发生变化时通知






vue3.x


vue3.0通过Proxy来劫持数据，当数据发生变化时发出通知






proxy相较于object.defineProperty的优势


    

  1. defineProperty只能监听某个属性，不能对全对象监听
    2. 

  2. Proxy可以监听数组的变化，不用再去单独的对数组做特异性操作
    3. 

  3. 可以检测到数组内部数据的变化
    4. 



异步组件的使用


vue2定义异步组件



 




vue3中使用defineAsyncComponent 定义异步组件