Vue3中其它Composition API（问题及优势）

1.shallowReactive与shallowRef

。shallowReactive : 只处理对象最外层属性的响应式 (浅响应式)（仅限于job层）
。shallowRef: 只处理基本数据类型的响应式不进行对象的响应式外理
。什么时候使用?
。如果有一个对象数据，结构比较深,但变化时只是外层属性变化 ===> shallowReactive。
。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

2.readonly与shallowReadonly

readonly：让一个响应式数据变为只读的（深只读）

shallowReadonly：让一个响应式数据变为只读的（浅只读）

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

3.toRaw与markRaw

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

4.customRef

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

<script>
import { customRef } from "vue";
export default {
  name: "App",
  setup() {
    //自定义一个ref名为：myRef
    function myRef(value) {
      //定义一个定时器
      let timer;
      return customRef((track, trigger) => {
        return {
          get() {
            track(); //通知Vue追踪value的变化（提前和get商量一下，让他认为这个value是有用的）
            return value;
          },
          set(newValue) {
            // 防抖
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              trigger(); //通知vue重新解析模板
            }, 1000);
          },
        };
      });
    }
    let keyWold = myRef("hello"); //使用程序员自定义的myRef
    return {
      keyWold,
    };
  },
};
</script>

5.provide与inject

作用：实现祖孙组件间通信

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

具体写法：

1.祖组件中：

import { reactive ,toRefs,provide} from 'vue';
import Child from "../src/components/Child.vue";
export default {
  name: "App",
  components:{
    Child
  },
  setup(){
    let car = reactive({ name:'奔驰',price:'40w'})
    provide('car',car)//给自己的后代组件传值
    return {
      ...toRefs(car)
    }
  }
};

2.后代组件中：

 import { inject } from 'vue';
 export default {
     name:'SonContent',
     setup(){
        let car = inject('car')
       return {car}
     }
 };

6.响应式数据的判断

isRef: 检查一个值是否为一个 ref 对象。

isReactive: 检查一个对象是否是由 reactive创建的响应式代理。

isReadonly: 检查一个对象是否是由 readonly 创建的只读代理。

isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。

Composition API 

Composition API 存在的问题

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

 Composition API 的优势

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

之前：

之后

 

Vue3.0新组件

1.Fragment

在Vue2中: 组件必须有一个根标签

在Vue3中: 组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:

减少标签层级,减小内存占用

2.Teleport

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

   <teleport to="移动位置">
        <div v-if="isShow" class="mask">
            <div>
                <h3>我是一个弹窗</h3>
                <button @click="isShow = flase">关闭弹窗</button>
            </div>
        </div>
    </teleport>

3.Supense

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

使用步骤：

异步引用组件:

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

使用 Supense包裹组件，并配置好default与fallback（默认加载的内容）

其他改变

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

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