|Vue3.0高阶实战：开发高质量音乐Web app

课程链接：

Vue3.0来了
2020年09月18日在万众期待中Vue3.0正式版发布于git上并被命名为‘One Piece’ 。这也许在这个并不平凡的一年里不算一件大事，但是对于我们广大的前端开发者开讲是一个轰动的事情。 Vue3.0历经了2年多的开发工作，终于带着全新的特性在万众期待中来了。

Vue3.0学习
Vue3.0正式发布之后笔者也和大多数热爱前端的开发者一样迅速的上手了对Vue3.0的采坑之旅(全英文当真难啃啊) 。
上手准备
安装Vite
vite是伴随这Vue3.0诞生的单文件组件的非打包开发服务器用来进行3.0的编译
安装vite命令
//yarn安装yarn global add create-vite-app//npm 全局安装npm i -g create-vite-app
创建项目
完整命令：create-vite-app 'xxx项目名'
缩写命令：cva 'xxx项目名'
Vue3.0中的新特性
Vue3.0虽然进行很大程度的重构但是还是保留了Vue的友好行。 Vue3.0可以完美兼容2.0就是说开发者可以用2.0的写法继续在3.0中进行使用并且完美运行。但是并不建议这么做，因为3.0中一些写的语法使用起来是真的特别方便使用。
Vue3.0的设计思想
Vue3.0设计模式与2.0不同采用的是多模块架构思想使得项目中引用Vue框架时耦合降低不必要强依赖于Vue 。比如在项目中使用Vue3.0时可以按需引用使用的功能模块不再整个引用Vue整个的框架项目打包时只会打包相应的功能模块应用体积会大大降低。若需要进行其他平台的适配、基于Vue3.0进行个性化的难度也大大降低，只需要重写相应的更新模块即可。
创建应用程序方式改变
Veu3.0中应用程序实例创建的方式也进行了更改，通过使用为动态函数而不是静态函数进行创建应用程序实例。这样做好处为：
创建程序实例时可以实现程序实例之间的相互独立，互不干扰。
可以通过摇树算法treeshaking进行打包优化把未使用的模块不进行打包操作减小程序体积。
拥抱微前端
setup()函数
写法如下：
setup(porps context) <{p>const formModel = ref(<{p>name: \"zhangsan\"
password: \"666\"
);
//需要暴露出去的值再此return出去
return <{p>formModel
;

此方法可以接收两个参数props和context
props中传递的是一个响应式的值可以通过toRefs进行结构拿到从上层传递下来的值，但是不能直接进行结构会导致props中的属性失去响应式。
context中传递的是上下文在这里可以找到 attrs 和 slots 。
此方法是Vue3.0新特性中特别重要的一个特性它的诞生解决了2.0中许多遗留的问题。
setup()的出现使得代码的可维护性、复用性、可读性都大大提升了
setup()的出现可以替代掉mixin()函数，解决掉了mixin()可能存在命名重复的隐患
消除this ，拥抱ts
setup中的数据优先级高与data()中Vue3.0中获取某个值首先会从setupDate中进行查找。
更小的性能消耗，在2.0中data中所用的定义的数据都会进行响应式处理不考虑使用者是否需要使用相应式导致性能消耗较高。在3.0中是通过ref()和reactive()进行按需响应式处理。不仅把选择权交给了开发者，还大大降低了性能消耗。
v-model的改变
总所周知在Vue2.0中v-model只能进行动态绑定value值的变化，但是在Vue3.0中v-mode可以同时绑定多个不同值的写法为v-model:xxx='变量名' ，子组件需要更改绑定的值时需要使用setup函数中的第二个参数进行触发更改方法，写法为context.emit('update:xxx' false)