vue3.0新特性记录表（只记录常用的）

使用composition API （组合式API） 来调用内部方法,组件。 例如：

import {ref,reactive,defindComponent,defindAsyncComponent, teleport,getCurrentInstance,watch,computed} from 'vue' 

defindComponent： 定义组件
defindAsyncComponent() 方法： 定义异步组件方法
teleport ： 传送
getCurrentInstance() ： 获取当前组件实例  （用在setup()方法中最为有效） 然后通过let { ctx } = getCurrentInstance()   上下文来获取
ref、reactive响应式对象：两者大同小异，ref用于单个定义，reactive用于对象式定义

修改的内容：

1、setup()方法 ： 生命周期运行在beforeCreate 和create 的时候就已经调用。

setup有两个参数，第一个props，接收的是props对象传过来的值。第二个ctx 上下文跟getCurrentInstance里面的ctx 不同，它是选择性地暴露了一些property，主要有[attrs,emit,slots]。

在setup中定义响应式变量，用ref : const a = ref('这是值，可以是数值也可以是字符串')  。 reactive：const b = reactive({ name: '这是对象形式'  })。 注意后面要return  {}  返回需要返回的值。

2、teleport(传送) 组件  ： 属性为to="test" , 然后平级组件内容中使用 id="test" 来显示 。  主要用来解决有些组件层级问题  

3、用render来自定义模板发生了少许改变h()  需要通过import 引进来才可用 例子：
 

 import {defindComponent,h} form 'vue'   

 export default defindComponet({
    render(){ return h('div')  }  
})

5、在vue2x  传统的按需加载是直接  i : ()=> import('') 而新的方法是需要引入defindAsyncComponent() 来进行使用  

简易方法:  i: defineAsyncComponent(()=> import('')) 。

带选项的方法: 

const AsyncFooWithOptions = defineAsyncComponent({
      loader: () => import("./Foo.vue"),
      loadingComponent: LoadingComponent,
      errorComponent: ErrorComponent,
      delay: 200,
      timeout: 3000
})

    
移除的API：
1、 移除$on、$emit 、$once、$off 方法，取而代之引入mitt方案 。

例子：

import mitt from 'mitt'    

mitt.on(event,callback)   ; mitt.emit(event,value)
2、根实例初始化，不再是通过构造函数来进行初始化而是通过新引入的createApp方法进行初始化。例子：

 import { createApp } from 'vue'  

import App from './app'  
   旧：new Vue({
        router,
        store,
        render: (h) => h(App)
    }).$mount('#app');
   新：const app = createApp(App).use({ route,store }).mount('#app');
然后，以前vue2x的时候通过绑定全局方法和属性的时候是通过Vue.prototype来操作， 现在必须使用app.config.globalProperties.xx     来进行全局声明 。组件内直接this.xx 来使用即可