vue3新特性补充

1、实例&生命周期

\	vue2	vue3
创建Vue 实例	var vm = new Vue({ // 选项})	const app = Vue.createApp({ /* 选项 */ })
生命周期	beforeCreate、created、beforeMount 、mounted、beforeUpdate、updated、beforeDestroy、destroyed、errorCaptured	beforeCreate、created、beforeMount 、mounted、setup、beforeUpdate、updated、beforeUnmount、unmounted、errorCaptured、renderTracked（调试）、renderTriggered（调试）

vue3-创建应用createApp

从技术上讲，Vue 2没有“应用”的概念。我们定义为应用的只是通过创建的根Vue实例new Vue()。从同一Vue构造函数创建的每个根实例都共享相同的全局配置。Vue当前的某些全局API和配置会永久更改全局状态。这会导致一些问题：

全局配置更容易使测试过程中意外污染其他测试案例
影响每一个根实例

Vue.mixin({
    /* ... */ })

const app1 = new Vue({
    el: '#app-1' })
const app2 = new Vue({
    el: '#app-2' })

vue3 应用程序实例

createApp返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。该上下文提供了先前在Vue 2.x中“全局”的配置。该实例不会被应用于其他实例的任何全局配置所污染。共享实例属性应附加到应用程序实例的config.globalProperties

import {
    createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.isCustomElement = tag => tag.startsWith('app-')
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)
app.provide(/* ... */)

app.config.globalProperties.customProperty = () => {
   }

app.mount(App, '#app')

compute

Vue 2是所有计算属性都是根对象的属性。Vue 3是计算属性都是独立变量，监听的也都是响应式数据，computed一定返回ref对象，这里可以看vue3的响应式引用

// vue2

computed: {
   
    // 仅读取
    aDouble: function () {
   
      return this.a * 2
    },
}

// vue3

// 数据是reactive
const twiceTheCounter = computed(() => counter.value * 2, (newVal, oldVal) => {
   
  console.log(newVal, oldVal);
})
// 数据是ref
const reData= computed(test1,(newVal, oldVal) => {
   
  console.log(newVal, oldVal);
})
// 监听多个数据
const moreData= computed([num,</