vue3的新知识点
一、初入门
- 通过CDN <script src="https://unpkg.com/vue@next"></script>
- 通过脚手架Vite 或者vue-cli搭建
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue32
npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3二、新增的知识点
- Composition API
- Teleport
- Fragments
- Emits Component Option
- createRender
- SFC相关的API、CSS变量
三、更改点
1.v-for组件阵列参考
在Vue 3中，这种用法将不再在中自动创建数组$refs。要从单个绑定中检索多个引用，请绑定ref到提供更大灵活性的函数（这是一个新功能）
2.异步组件（与2.0的异同点）
defineAsyncComponent 为异步组件，component选项重命名为loader,加载程序本身不接收resolve和reject,必须返回promise。
3.枚举属性
普通的非布尔属性如何不同地强制转换成“枚举属性”。
在3.x中，null还是undefined应该用来显式删除属性。
4.$attrs包括class&style
$attrs现在包含所有传递给组件的属性，包括class和style。
inheritAttrs: false vue2中不会添加到根元素，与根元素的样式分开5.$children实例属性已从vue3.0删除。
6.自定义指令
创建自定义指令：其中定义了组件的生命周期方法。
const MyDirective = { beforeMount(el, binding, vnode, prevVnode) {}, mounted() {}, beforeUpdate() {}, // new updated() {}, beforeUnmount() {}, // new unmounted() {}}
7.自定义元素互操作
自定义元素白名单现在在模板编译期间执行，应通过编译器选项进行配置。
v-is 类似:is，其值为js字符串文字。
一些HTML元素，比如<ul>，<ol>，<table>和<select>有什么元素可以在其内部出现的限制，以及一些元素，如<li>，<tr>和<option>只能出现某些其他元素中。
8.数据选项
data中定义中，只能仅使用function,没有直接传入的对象。
Mixin合并行为更改：合并的数据将是浅合并。
9.emits选项
用途：可以定义子组件发出的事件
10. Event API
vue3中的$on、$off、$once被删除。vue2中有事件中心eventHub
11.filter
vue3中filter已停止使用，但是使用全局过滤器中可使用 app.config.globalProperties.$filter进行定义
12.Fragment(片段)
vue3中支持多个根组件。
13.功能组件
单一文件组件(SFC)，
14.全局API
createApp返回一个应用程序实例。
Vue.prototype取代的是config.globalProperties、provide/inject、挂载应用程序系列。
15.Global API Tree shaking
Tree shaking：“消除死代码”的术语，消除无用的js代码。
import { nextTick } from 'vue'nextTick(() => { // something DOM-related})
16.内部模板属性
inline-template 已被废除。
17.key属性
vue3中，key在v-if/v-else/v-else-if分支上不再需要s,因为会自动生成唯一的key。
vue2中，template标记不能包含key，key放在其每个子元素上。vue3中可以将其放在template上。
18.键码修饰符
v-on不再支持使用数字（keyCodes）,vue3中使用kebab-case名称用于用作修饰符的任何键。
19.render函数
vue2接收h作为参数，现在h全局导入，
20.this.$scopedSlots已删除
21.过渡组的变化，命名和transition-group
22.v-on.native修饰符已经删除
23.v-bind.sync
vue3中，v-model中，自定义组件等效于传递modelValue,并发出update:modelValue事件。
v-model的修饰符，vue3中除了.trim，还可以自定义修饰符。
24.v-if与v-for用于同一个元素的时候，vue3中v-if则优先级高于v-for.
25.v-bind合并行为
vue3中如果v-bind定义了单个属性又定义了相同的单个属性，则绑定的顺序决定如何合并他们。
26.监听数组
用watch监听数组，回调仅在替换数组时触发。如果触发突变，则deep:true.
watch: { bookList: { handler(val, oldVal) { console.log('book list changed') }, deep: true },}
四、composition API
对于逻辑复杂的代码，我们按照逻辑关注点进行分类。关注点进行分离，可将不同的逻辑写成不同的js功能模块，将复用的逻辑提取出来。
setUp组件选项，在组件创建之前完成，一旦传入pros,将为入口点。
1.reactive variables与ref :ref接受参数并将其包装在具有value属性的对象中。
2.mounted=>onMounted(事件的名称)
3.watch=>接收三个参数，第一个为参数名，第二个为新旧值的回调参数。
4.computed属性=>computed(()=>{})
=====================================setUp===============================
1.有两个参数（props,context）
props有实时性，而toRefs通过数据结构，拿到props的值。
context是没有实时性，传入的参数（attrs,solts,emit）
return 返回对象、渲染函数。
=====================================生命周期挂钩==========================
setUp中，可以直接写beforeCreated和created的事件。
直接使用provide、inject。reactive、readonly只读。
五、teleport
作用：可以控制在哪里显示所包含的DOM值。