1.了解vue3.0新特性有哪几点？

1、向下兼容vue2
2、性能提升（打包大小减少了41%，初次渲染快了55%，更新快了133%，内存使用减少了54%）
3、CompositionAPI 集合，解决vue2的一些组件开发问题
4.新的api（teleport瞬移组件和suspense解决异步加载组件问题）
5.ts支持

2.直接上手搭建项目从入口文件main.js（main.ts）开始

注意：你可能需要更新下你的vue版本vue --version 如果版本低了有可能不支持vue3.0的脚手架建立
1.创建一个名vue3.0项目 vue create vue3.0，选择模板的时候会有vue2.0和vue3.0的选项，或者最后一项手动
2.在入口处main.ts（或者main.js） 这里
对比之前现在不是new 了，

// 这里不可以import Vue from 'vue' 这里导出的是很多属性和方法
// 如果你习惯于使用Vue可以用import * as Vue from 'vue'
import { createApp, h } from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
// createApp().mount('#app')
// 1.第一种so easy! 如果只有一个App可以直接写入
 createApp(App).mount('#app')
// 2.第二种 有点点变化 如果你有更多的vue的东西要绑定可以传对象
 createApp({
  // 你想在这里绑定vue options的各个属性
  data() {
    return {
      name: '村花'
    }
  },
  method: {}，
  computed: {},
  ...
  // 最后把你首屏渲染的App放上去,注意这里的h需要你去vue里解构出来
  render: () => h(App)
}, {name: '靓仔'}).mount('#app')
// 这里第二个参数是全局根props属性
// 在index.html 就是你绑定的#app元素上使用的
/*
<div id='#app'>
  {{name}} // 靓仔
</div>
*/

// 第三种 如果你有更多的插件要引入需要用到use,而这里变化成链式调用了
createApp(App).use(router).use(store).mount('#app')

3.那么我们想跟vue2一样设置原型怎么设置呢？vue3.0提供了一个配置属性globalProperties，代码走一下

// vue2.0示列
Vue.prototype.$name = ...
// vue3.0示列
// 首先你需要把你初创的实例赋值一下
// 例如：这里有个小坑，大家可能习惯性这样(错误方法)
const app = createApp(App).use(router).use(store).mount('#app')
app.config.globalProperties.$name = ...
// 上面的方式会报错，因为你最后.mount后就不是实例了,而是一个代理对象Proxy
// 正确写法
const app = createApp(App).use(router).use(store)
app.config.globalProperties.$name = '小哥哥'
app.config.globalProperties.$http = () => {}
app.mount('#app')

4.如何调用全局属性
你会发现你在其他地方再用this.http你拿不到了，这里提供了一个新的api: getCurrentInstance获取vue当前实例,挂载在全局上的东西都要通过实例去拿

// 比如你在某个文件中要调用了,那你要先引入
import { getCurrentInstance } from 'vue'
// 然后拿到实例
const _this  = getCurrentInstance()
// 在实例中有个ctx上下文（非常像react的context）
_this.ctx.$name  = '改下名'

3.vue文件中如何应用vue3.0的API

变动的部分就是script里的，就直接来
在vue2.0中

export default {
  name: 'App',
  components: {},
  props: {},
  data() {
      return {}
  },
  methods: {},
  computed: {},
  watch: {},
  beforeCreate() {},
  created(){},
  beforeMount(){},
  mounted(){},
  beforeUpdate(){},
  updated(){},
  beforeDestroy(){},
  destroyed(){}
}

在vue3.0中用setup去包含了所有的钩子等

// 所有使用的钩子都要引入
import { 
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onRenderTracked,
  onRenderTriggered,
  watch,
  computed
} from 'vue'
export default {
  name: 'App',
  components: {},
  props: {},
// 这里的props不能使用解构，否则会不响应，如果用解构可以用toRef使之响应
  setup(props, context) {
    // 所有的钩子函数都写进这个里面，在外面写也会执行，是向下兼容的，但是不建议两个都写
    console.log('这里的setup函数执行就相当于vue2的钩子beforeCreate和created')
    // 所以在这里this是不能用的，因为setup在一开始就运行了
    // 其他钩子XXX的执行需要在这用on前缀写上:onXXX(()=>{}),相当于执行的是一个方法，传入的参数是个回调函数
    onBeforeMount(()=>{
      console.log('setup的钩子和vue2.0的钩子同时存在的时候，setup里的钩子会先执行')
    }) // 这里不要习惯性的写逗号，这里是调用钩子，而不是options
    onMounted(()=>{
      console.log('渲染完了')
    })
    onBeforeUpdate(()=>{
      console.log('更新前')
    })
    onUpdated(()=>{
      console.log('更新后')
    })
// 大神说unmount（卸载）要比destroy（销毁）要更形象些，所以这个版本换个名字
    onBeforeUnmount(()=>{
      console.log('卸载前：vue3.0的这个生命周期命名要区别于vue2.0的beforeDestroy')
    })
    onUnmounted(()=>{
      console.log('卸载后：vue3.0的这个生命周期命名要区别于vue2.0的destroyed')
    })
    onRenderTracked((event) => {
      console.log('新增的钩子状态跟踪函数（跟踪全部的，需要自己去查看哪个变化了）：其实就是跟踪return 里数据的变化')
    })
    onRenderTriggered(event => {
      console.log('新增的钩子状态跟踪函数(区别在与精确跟踪变化的那个数据))
    })
    // 监听一个值，如果要监听多个值，第一个参数就是个数组，元素是要监听的多个值
    watch('要监听的值', (val, oldVal) => {})
    // 计算属性：创建一个响应式的str计算属性，根据依赖的ref自动计算并返回一个新的ref
    const i : number = ref(0)
    const  str = computed(() => i.value++)
    return {
      i，
      str 
    }
}