【学习打卡】第 11 天 Vue3(3)

课程名称：前端框架及项目面试 聚焦 Vue3/React/Webpack
课程章节：第 6 章 Vue3 学习（新）
主讲老师：双越

课程内容：

今天学习的内容包括：
6-12 vue3 升级了哪些重要功能
6-13 Composition API 如何实现逻辑复用
6-14 Vue3 如何实现响应式
主要讲了 vue3 升级重点部分，举例获取鼠标坐标演示代码复用，回顾 vue2 响应式原理，和一点点 proxy

课程收获：

大概复述一下

vue3 升级部分

createApp 更新

const app = Vue.createApp({/*…*/})
app.use(/*…*/)

emit

export default {
  props: {
    msg: String,
  },
  // 需要声明
  emits: ["onSayHello"],
  // 传参
  setup(props, { emit }) {
    emit("onSayHello", "vue3");
  },
};

template 里可以是多个节点模板

异步组件

import { defineAsyncComponent } from "vue";
const AsyncComp = defineAsyncComponent(() =>
  import("./components/MyComponent.vue")
);

移除 filter，.sync

Teleport

被渲染在整个 Vue 应用外部的其他地方

<Teleport to="#modals">
  <div>A</div>
</Teleport>

等待异步组件 或者 async setup

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />

  <!-- 在 #fallback 插槽中显示 “正在加载中” -->
  <template #fallback> Loading... </template>
</Suspense>

逻辑复用

定义方法 Fn 单独写在 js 里返回响应式的值

vue2 响应式原理回顾

Vue2 利用 Object.defineProperty(tar, key, {
get() {
//…
},
set() {
//…
}
})
对象深度监听需要一次性递归，无法监听新加删除属性，监听数组需要处理

proxy 基本使用

创建一个代理

const pd = new Proxy(data, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
  set(target, key, val, receiver) {
    return Reflect.set(target, key, val, receiver);
  },
  deleteProperty(target, key) {
    return Reflect.deleteProperty(target, key);
  },
});