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
}
}
