Hello vue3

//main.js
...
const foo = () => {console.log('hi')}
const app = createApp(App)
...
app.provide('foo', foo)
...

//example.vue
...
export default {
  setup () {
    const foo = inject('foo')
    return {
      foo
    }
  },
  mounted: function() {
    this.foo
  }
}

//share.ts
const shareFoo = (text: string = 'hello') => {
  console.log(text)
}
export {shareFoo}

//example.vue
import {shareFoo} from 'share.ts'
shareFoo('world')

<!--el-affix-->

<el-affix :offset="22" style="width: 100%" target="#left-card">
  ...
</el-affix>

- ~~被 position: sticky 包裹的组件开出来的遮罩有它自己的想法~~（错怪`element-plus` 了，这是 `bootstrap` 的组件的 `z-index` 是`1000`的锅，需要设置`z-index`……以及大图预览有一个 `z-index` 属性可以拉满就不会被覆盖了）
![就是不上就是玩](element_plus_style_position_sticky.png)
- input组件背景色覆盖边框问题
![逼死强迫症](element_plus_component_input.png)
- 错位的图标，翻了一下issues，就差一个方向就凑齐偏上下左右了……
- (容我再想想)

### axios -> fetch

我刚开始学vue的时候对ajax的认知还停留在 `XMLHttpRequest` 和 jQuery 的 `$.GET`，所以看到 Vue2 的[计算属性](https://cn.vuejs.org/v2/guide/computed.html)这章时看到了个 `axios` 就先入为主用上了，后来又因为想对IE的兼容，就一直没做改动。

既然升级到了 Vue3，就不用管对 IE 的兼容了，不如直接上 `fetch`，我根据我的需求对原本使用 `axios` 的部分做了一个简单的转换

```javascript
//axios
import axios from "axios"
const CancelToken = axios.CancelToken
let cancel = function () {}
export default {
mounted: function() {
 new CancelToken(c => cancel = c);
},
methods: {
 foo: function () {
   axios.get("https://example.com/example.json", {
     cancelToken: new CancelToken(c => cancel = c)
   }).then(response => {
     console.log(response.data)//反序列化后的数据
   }).catch(e => console.log(e))
 }
}
}

//fetch
export default {
setup () {
 let controller = [new AbortController()]
 return { controller }
},
methods: {
 foo: function () {
   this.controller[this.controller - 1].abort()
   this.controller.push(new AbortController())
   fetch("https://example.com/example.json", {
     signal: this.controller[this.controller.length - 1].signal
   }).then(async response => {
     response = await response.json()//反序列化
     console.log(response)
   }).catch(e => {
     if (!this.controller[this.controller.length - 1].signal.aborted) {
       //AbortController 干的
       console.log("by AbortController")
     } else {
       //别的问题
       console.log(e)
     }
   })
 }
}
}