Vue3

快速创建

• main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { pinia } from '@/stroe'

createApp(App)
  .use(router)
  .use(pinia)
  .mount('#app')

• App.vue文件

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="[]">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

基本原理

Proxy

const $data = new Proxy(target, {
  get (target, key, receiver) { /* receiver: proxy实例 */
    return target[key]
  },
  set (target, key, value, receiver) {
    target[key] = value
  },
  apply (target, ctx, args) { /* 当前对象 需要绑定的this的上下文对象 argments数组 */
    // 用来拦截函数的调用、call、apply操作
    // 一般用来给函数使用
  },
  has (target, key) {
    // 拦截hasOwnProperty操作
  },
  deleteProperty (target, key) {
    // 拦截delete操作
    // 如果抛出错误或者返回false 当前属性就无法删除
  },
  construct (target, args, newTarget) { /* 当前对象 argments数组 创建实例对象时，new命令作用的构造函数 */
    // 拦截new命令
  }
})

WARNING

注意：他只能拦截当前对象的属性，无法去拦截当前对象身上的其他深层对象，其他的深层对象还是需要再去处理

Reflect

将Object对象的一些明显属于语言内部的方法，放到Reflct对象上。

修改某些Object上方法的返回值。

让Object的操作都变成函数行为。例：Reflect.deleteProperty(target, key)、Reflect.has(target, key)

Reflect对象的方法与Proxy对象的方法一一对应，这样可以使Proxy可以再Reflect获取默认行为

const $data = new Proxy(target, {
  get (target, key) {
    // do something...
    return Reflect.get(target, key); /* get默认行为就是返回target[key] */ 
  }
})

• 其他静态API
  • Reflect.defineProperty(): 同Object.definePropeety()。
  • Reflect.deleteProperty(): 类似于delete操作符,需要传入target与propName两个参数。
  • Reflect.getPrototypeOf(): 返回指定对象的原型，需传入target对象。
  • Reflect.has(): 类似Object.hasOwnProperty(), 需传入target与propName两个参数。
  • Reflect.ownKeys(): 类似于Object.keys(),需传入target对象。