-
Vue 3 框架
目录
注释：
1、本文的特点？
本文只列出Vue 3 中的新知识，且所有知识都写在下面代码中的注释里，大家可以结合这些代码和注释去学习这些新知识。
2、适合哪些人学习？
比较适合那些掌握Vue 2 和 基础TS的人群，这样学习起来就非常轻松。
3、提醒：
我在第一节中是使用的setup语法糖，后面所有的代码都是没有使用setup语法糖的，使用的是setup函数。
setup语法糖中，定义的变量在模板中是不需要暴露出去的，在模板中直接使用，大家看到后面就知道是什么意思了。
Vue 3 中引入组件是不需要注册的，直接import引入，使用即可。剩下的基本和vue 2中的语法一样。
4、接下来的计划：
准备总结数据库(MySQl)的知识，然后持续发布。
总结Java的知识，然后持续发布。
5、寄语：引用撒贝宁老师的开场白
时光总像“林花谢了春红”，脚步“太匆匆”。在追寻梦想的路上，“何妨吟啸且徐行”，这里有“荡胸生层云”的旷达，有“潇潇雨歇”的怅惋，有“长太息以掩涕兮”的悲悯，也有“悠悠我心”的真情！
韶华易逝，沧海桑田。当古代的文人面对时光的流逝，既有“十年生死两茫茫”的深沉，也有“想当年金戈铁马，气吞万里如虎”的壮志，更有“花有重开日，人无在少年”的劝诫。无论“黄沙百战穿金甲，不破楼兰终不还”的决绝，“人生自古谁无死，留取丹心照汗青”的气节，还是“我自横刀向天笑，去留肝胆两昆仑”的慷慨，历史如尘烟消散，情感凝结成永恒。
“非淡泊无以明志，非宁静无以致远”，人生就是一场不断完善自己的旅程，这一路上所有的经历，无论悲喜，都是为了成就一个更完美的自己。“东方欲晓，莫道君行早，踏遍青山人未老，风景这边独好。”你会发现，人生有诗意，永远是少年！
一、API风格
Vue的组件可以按两种不同的风格书写：选项式API和组合式API。
1.1、选项式API
Vue 2 中使用的式选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data、methods和mounted。选项式所定义的属性都会暴露在函数的this上，它会指向当前的组件实例。
选项式API代码：
- <div>
- <span>{{mag}}span><br>
- <button @click="clickAddFun">+1button>
- div>
- template>
- <script>
- export default {
- // data () 返回的属性将会成为响应式的状态
- // 并且暴露在 this 上
- data () {
- return {
- msg: 0
- }
- },
- // vue 2 中的生命周期钩子
- // 这个函数就会在组件挂载完成后被调用
- mounted () {
- console.log(this.msg);
- },
- // methods是一些用来更改状态与触发更新的函数
- // 它们可以在模板中作为事件监听器绑定
- methods: {
- clickAddFun () {
- this.msg++;
- }
- }
- }
- script>
- <style>
- style>
1.2、组合式API
vue 3 中使用的是组合式API，组合式API的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对vue的响应式系统有更深的理解才能高效使用。相应的，他的灵活性也使得组织和重用逻辑的模式更加强大。
通过组合式API，我们可以使用导入的API函数来描述组件逻辑。在单文件组件中，组合式API通常会与
