第八章：Vue3(下)

第八章：Vue3(下)

8.1：其他Composition API

• shallowReactive与shallowRef

  1. shallowReactive：只处理对象最外层的响应式(浅响应式)。
  2. shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。
  3. 什么时候用？
     • 如果有一个数据对象，结构比较深、但变化时只是外层属性变化 ===> shallowReactive
     • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ====> shallowRef

• readonly与shallowReadonly

  1. readonly：让一个响应式数据变为只读的(浅只读)
  2. shallowReadonly：让一个响应式数据变为只读的(浅只读)。

  应用场景：不希望数据被修改时。

• toRaw与markRaw

  1. toRaw
     • 作用：将一个由reactive生成的响应式对象转为普通对象。
     • 使用场景：用于读取响应式对象的普通对象，对这个普通对象的所有操作，不会引起页面更新。
  2. markRaw
     • 作用：标记一个对象，使其永远不会再成为响应式对象。
     • 应用场景：
       1. 有些值不应该被设置为响应式的，例如复杂的第三方类库等。
       2. 当渲染具有不可改变数据源的大列表时，跳过响应式转换为可以提高性能。

• customRef

  1. 作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制

  2. 实现防抖效果

     
     
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26

• provide与inject

  1. 作用：实现祖与后代组件间通信。

  2. 套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据。

  3. 具体写法：

     • 祖组件中：

       setup(){
       	......
           let car = reactive({name:'奔驰',price:'40万'})
           provide('car',car)
           ......
       }
       1
       2
       3
       4
       5
       6

     • 后代组件中：

       setup(props,context){
       	......
           const car = inject('car')
           return {car}
       	......
       }
       1
       2
       3
       4
       5
       6

• 响应式数据的判断

  1. isRef：检查一个值是否为ref对象
  2. isReactive：检查一个对象是否是由reactive创建的响应式代理。
  3. isReadonly：检查一个对象是否是由readonly创建的只读代理。
  4. isProxy：检查一个对象是否由reactive或者readonly方法创建的代理

8.2：Composition API的优势

• Options API存在的问题

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

• Composition API的优势

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

8.3：新的组件

• Fragment

  1. 在Vue2中，组件必须有一个根标签。
  2. 在Vue3中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中。
  3. 好处：减少标签层级，减少内存占用。

• Teleport

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

     
     	
     
     		
     
     			
     我是一个弹窗
     			关闭弹窗
     		
     	
     
     1
     2
     3
     4
     5
     6
     7
     8

• Suspense

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

  2. 使用步骤：

     • 异步引入组件

       import {defineAsyncComponent} from 'vue'
       const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
       1
       2

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

       
       1
       2
       3
       4
       5
       6
       7
       8
       9

8.4：其他

• 全局API的转移

  1. Vue 2.x 有许多全局 API 和配置。

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

       //注册全局组件
       Vue.component('MyButton', {
         data: () => ({
           count: 0
         }),
         template: 'Clicked {{ count }} times.'
       })
       //注册全局指令
       Vue.directive('focus', {
         inserted: el => el.focus()
       }
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11

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

     • 将全局的API，即：Vue.xxx调整到应用实例（app）上

       2.x 全局 API（Vue）	3.x 实例 API (app)
       Vue.config.xxxx	app.config.xxxx
       Vue.config.productionTip	移除
       Vue.component	app.component
       Vue.directive	app.directive
       Vue.mixin	app.mixin
       Vue.use	app.use
       Vue.prototype	app.config.globalProperties

• 其他改变

  1. data选项应始终被声明为一个函数。

  2. 过度类名的更改：

     • Vue2.x写法

       .v-enter, .v-leave-to {
         opacity: 0;
       }
       .v-leave, .v-enter-to {
         opacity: 1;
       }
       1
       2
       3
       4
       5
       6

     • Vue3.x写法

       .v-enter-from, .v-leave-to {
         opacity: 0;
       }
       .v-leave-from, .v-enter-to {
         opacity: 1;
       }
       1
       2
       3
       4
       5
       6

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

  4. 移除v-on.native修饰符

     • 父组件中绑定事件

       
       1
       2
       3
       4

     • 子组件中声明自定义事件

       
       1
       2
       3
       4
       5

  5. 移除过滤器（filter）

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