vue3-shallowRef、teleport、全局api

组件通信总结

父传子：props、v-model、$refs、默认插槽具名插槽
子传父：props、自定义事件、v-model、$parent、作用域插槽
祖传孙、孙传祖：$attrs、provide、inject
任意组件之间：mitt、pinia

shallowRefs、shallowReactive

• shallowRef 只响应第一层，无法修改person.value.name的值、可以修改person.value={}-->利于把握数据整体的变化
• shallowReactive
  car=shallowReactive({brand,options:{}}) ->第一层是car.brand和car.options

readonly和shallowReadonly

• readonly
  let sum2=readonly(sum) ->保证数据不可修改

• shallowReadonly
  只限制顶层次（第一层为只读

toRaw和markRaw

• toRaw用于获取一个响应式对象的原始对象，且返回的对象不再是响应式的
• markRaw：标记一个对象使其永远不会是响应式的->保证数据不可修改只能展示、防止引用第三方库时把一些数据做成了响应式

customRef

创建一个自定义的ref，并对其依赖项跟踪
创建为hooks

import { customRef } from "vue";
export function useMsgRef(initValue: string, delay: number) {
  let msg = customRef((track, trigger) => {
    return {
      //msg被读取时调用
      get() {
        track(); //告诉vue 数据msg很重要，需要持续追踪，一变化就更新
        return initValue;
      },
      //msg被修改时调用
      set(value) {
        // initValue = value;
        // trigger(); //告诉vue 数据msg发生了变化，需要更新
        setTimeout(() => {
          initValue = value;
          trigger();
        }, delay);
      },
    };
  });
  return { msg };
}

teleport 传送门

<button @click="tan">展示弹窗</button>
  <teleport to="body">
    <div v-show="isShow" class="modal">
      <h2>Modal Component</h2>
      <p>This is a modal dialog.</p>
      <button @click="close">关闭弹窗</button>
    </div>
  </teleport>

让弹窗的样式以body为准，然后显示

suspense

实验性功能

<Suspense>   <!--包裹异步请求、网络请求-->
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>  <!--希望在请求网络等待时有反应-->
          <h2>加载中...</h2>
      </template?
    </Suspense>

全局api

在main.ts中
app.component('hello',hello) 这些hello组件就可以到处使用了
app.config.globalProperties.x=9 到处可使用{{x}}属性了
app.directive('beauty',(element,{value})=>{element.innerText+=value}) 则可以在组件上加v-beauty='sum' 使该属性获得样式
app.mount('#app') 挂载app

其他

vue3迁移指南-非兼容性改变、模版指令
过渡类名v-enter改为v-enter-from
KeyCode作为v-on修饰符的支持
移除了过滤器filter
移除了$children实例propert