Vue2是怎么定义的

在Vue2中是通过 Prototype 去定义全局函数和变量的，比如Vue.prototype.$xxx = () => {}

vue3定义

在Vue3中是没有 Prototype 这个属性的，他是通过createApp来返回应该变量的，在config中有一个叫globalProperties的属性，通过这个属性来定义全局的函数以及全局变量

export const app = createApp(App)

app.config.globalProperties.$xs = "春风吹又生"

在dom使用：$xs直接可以在任何一个Vue组件中使用,下面这样，页面就会渲染出来

 <div>
  {{ $xs }}
 </div>

定义方法也可以在dom中使用，在Vue3里面是没有filter这个函数，已经给去掉了，可以利用globalProperties来定一个全局过滤器

app.config.globalProperties.$filters = {
  format<T> (str:T) {
    return `春风吹又生-${str}`
  }
}

在dom中也是可以渲染的

 <div>
    {{ $filters.format('您好')}}
  </div>

在js中如何使用，vue引入getCurrentInstance方法，可以获取当前的一个实例，通过proxy来调用定义全局的函数的名，出现报错，可以可选链?来解决

需注意的是，在使用的时候页面会出现警告，需要在main.ts文件下，通过declare module来做一个声明，ComponentCustomProperties来注册说明是说明类型，可借助interface type来做类型推断