1.vue3带来的新变化（加+）
新的名词：Composition API（组合式API）
这是重点，它提供新的写代码的方式
三个点：
1.1 性能提升
首次渲染更快，diff算法更快，内存占用更少，打包体积更小
1.2 更好的Typescript支持（在vue下写TS更方便了）
1.3 提供新的写代码的方式：Composition API
2.移除vue2中的某些语法（减-）
vue3.0兼容大部分2.0版本（之前是怎么写的，现在也正常写），但是也有一些破坏性的语法更新
2.1 移除了$on方法 （eventBus现有实现模式不再支持，可以使用三方插件替代）
2.2 移除过滤器选项 （插值表达式里不能再使用过滤器filter， 可以使用methods替代）
2.3 移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并了）
3.目录变化
主要看三个文件位置的变化：(不重要，了解即可)
3.1 package.json文件中，版本变成3.0
"dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" }
3.2 main.js文件中的变化
import { createApp } from 'vue' +++ import App from './App.vue' // 根组件 之前是new Vue的形式 createApp(App).mount('#app') +++
3.3 app.vue 中的变化
vue3.0的单文件组件中不再强制要求必须有唯一根元素（之前都被div包裹）
<template> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <外面不用div标签包括了，可以一直写同级标签，更加随意了> </template>
上面是开胃菜，重点是下面的东西
4.组合式API和选项式API的区别
vue2中的叫选项式API（options），vue3中的叫组合式API(Composition API )
这里也是介绍，了解即可
options API（Vue2）特点：
比如数据就写到data选项中，方法就写到methods中…
composition API(Vue3) 特点:
是特定功能相关的所有东西都放到一起维护，比如功能A相关的变量和方法放到一起
vue3有点像js,对功能做了封装。不停的封装函数，不停的引用
4.1 优缺点小结：
Vue2选项式API(option api)：
优点：简单，各选项各司其职；
缺点：不方便功能复用；功能代码分散维护代码横跳
Vue3组合式API(composition api)
优点：
功能代码组合维护, 方便功能复用
4.2 Vue3组合式API(composition api) 【重点】
按照功能划分，在setup函数中写，每个功能里面变量和函数可以写在一起，如果功能扎堆代码量很大怎么办？拆解setup中的功能代码成一个一个函数
步骤：1.我们可以在.js文件定义方法，也可以在script标签里面写功能函数。
2. 然后在setup函数中调用
3.可以使用解构赋值的方式将函数里面的方法和变量取出来使用
注意：函数是一个独立的作用域，函数之间的变量互不干扰。
<script> 位置：<script>和export default之间。当然写在别的.js文件中也行 步骤1：定义函数，写逻辑（看位置，我是在这里写的，最后记得return出去） function useShow() { function show() { showDivFlag.value = true } function hide() { showDivFlag.value = false } //步骤1：将里面的函数和变量return出去，好给setup里面使用 return { showDivFlag, show, hide } } export default { name: 'App', setup() { // 功能一 //步骤2 引入步骤1写的函数，并解构 const { showDivFlag, show, hide } = useShow() return { showDivFlag, show, hide, fontColor, changeRed, changeBlue } } //步骤3：return 函数或者变量，目的是给模板使用 } </script>
小结：我们通过定义功能函数，把两个功能相关的代码各自抽离到一个独立的小函数中，然后通过在setup函数中再把两个小功能函数组合起来，这样一来，我们既可以把setup函数变得清爽，又可以方便维护快速定位功能位置。
5.组合API-setup函数
5.1 特点：
setup 函数是一个新的组件选项，作为组件中组合式API 的起点（类比data的作用）
setup 中不能使用 this， this 指向 undefined（这个哥们执行时机太快了）
setup函数只会在组件初始化的时候执行一次
setup函数在beforeCreate生命周期钩子执行之前执行（执行时机）
5.2 参数
第1个参数为props。props为一个对象，内部包含了父组件传递过来的所有prop数据
第2个参数为一个对象context。context对象包含了attrs，slots， emit属性
如：子传父原来的写法是this.$(emit),而这里就不行了，因为this指向underfined
正确的写法 ：context.emit(),当然也可把参数解构赋值setup(props,{emit})
setup(props, context) { console.log(props) context.emit('XXX',值) //注意格式，不能用this了 return{XX} }
5.3 返回值
setup（）返回一个对象，如果在data()中也定义了同名的数据，则以setup()中为准。
5.4 小结
1.setup的执行时机？ 比beforeCreate先执行
2. setup内部可以通过this访问到组件吗? 不能 结果是underfined
3. 它的返回值格式是？ 对象
6 . 组合API-生命周期
vue2是8个，而vue3只有7个，将前面两个变成了setup
`setup` 创建实例前 `onBeforeMount` 挂载DOM前 `onMounted` 挂载DOM后 `onBeforeUpdate` 更新组件前 `onUpdated` 更新组件后 `onBeforeUnmount` 卸载销毁前 `onUnmounted` 卸载销毁后
小结：1.组合API(vue3)的生命周期钩子有7个，它们都是回调函数的格式。可以多次使用同一个钩子，执行顺序和书写顺序相同
2.不建议vue2, vue3混合使用
7.组合API-ref函数
问题：在seup中的返回的数据不是响应式的
作用：使用ref函数定义响应式数据
使用步骤：
- 从vue框架中导入
ref函数 - 在setup函数中调用
ref函数并传入数据（简单类型或者复杂类型） - 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
<template> 公司：{{company}} //步骤4，在模板中使用 </template> <script> import { ref } from 'vue' // 步骤1.引入ref export default { setup () { // 步骤2.定义响应式对象 const company = ref('DiDi') // 在代码中修改(或者获取)值时，需要补上.value salary.value *= 2 return { company } //步骤3，导出数据 } } </script>
小结：ref函数，用来定义响应式数据 ，在代码中修改(或者获取)值的时，需要补上.value ，模板中使用不需要加.value
8.组合API-ref属性（注意上面是函数，这里是属性）
问题：如何获取子组件（DOM）的引用？
作用：掌握使用ref属性绑定DOM或组件
步骤：
- 导入ref函数
- 使用ref函数传入null创建 ref对象 =>
const hRef = ref(null)【固定格式】 - setup中导出
- 模板中使用ref绑定
<template> <div class="container"> <div ref="dom">我是box</div> <button @click="hClick"></button> // 步骤四：模板中使用 </div> </template> <script> import { onMounted, ref } from 'vue' //步骤1：导入ref函数 export default { name: 'App', setup () { // 步骤二：使用ref函数传入null创建ref对象 const dom = ref(null) const hClick(()=>{ console.log(dom.value) }) return {dom, hClick} //步骤三：导出 } } </script>
小结：先导入ref，再申明ref响应式数据，返回给模板使用，通过ref绑定数据
