558、Vue 3 学习笔记 -【常用Composition API（七）】 2024.05.13

目录

• • 一、Composition API的优势
  • • 1. Options API存在的问题
    • 2. Composition API的优势
    • 二、 新的组件
    • • 1. Fragment
      • 2. Teleport
      • 3. Suspense
      • 三、其他
      • • 1. 全局API的转移
        • 2. 其他改变
        • 四、参考链接

          一、Composition API的优势

          1. Options API存在的问题

          使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。

          2. Composition API的优势

          我们可以更加优雅的组织我们的代码，函数，让相关功能的代码更加有序的组织在一起。

          二、 新的组件

          1. Fragment

          在vue2中：组件必须有一个根标签

          在vue3中：组件可以没有根标签，内部会将分多个标签包含在一个Fragment虚拟元素中

          好处：减少标签层级，减少内存占用

          2. Teleport

          • 什么是Teleport ? —— Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

            // to可以取值：html、body、#atguigu、.box
            
                
                    
                        
            我是一个弹窗
                        关闭弹窗
                    
                
            
            

            3. Suspense

            等待异步组件时渲染一些额外内容，让应用有更好的用户体验

            使用步骤：

            异步引入组件

            import { defineAsyncComponent } from 'vue'
            const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
            export default{
                components:{Child}
            }
            

            使用Suspense包裹组件，并配置好default与fallback

            

            三、其他

            1. 全局API的转移

            • Vue2有许多全局API和配置

              例如：注册全局组件、注册全局指令等

              // 注册全局组件
              Vue.component('MyButton',{
                  data:() => ({
                      count:0
                  }),    
              })
              // 注册全局指令
              Vue.directive('focus',{
                  inserted: el => el.focus()
              })
              

              • Vue3.0中对这些API做出调整：

                将全局API，即：Vue.xxx调整到应用实例(app)上

                

                2. 其他改变

                • data选项应始终被声明为一个函数

                • 过渡类名的更改

                  

                • 移除keyCode作为v-on的修饰符，同时也不再支持config.keyCodes

                • 移除v-on.native修饰符

                  父组件中绑定事件

                  子组件中声明自定义事件

                  

                  • 移除过滤器(filter)

                    过滤器虽然看起来很方便，但它需要一个自定义语法，打破大括号内表达式是“只是JavaScript”的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器

                    四、参考链接

                    [01-Vue3学习笔记(尚硅谷)]