Vue3的一些问题清单

1: 关于 setup 中没有 this 的问题
官方文档是这么解释的：在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性---本地状态，计算属性/方法。

但是从源码实现你会发现其实组件实例创建在前，函数之所以访问不到 this，是因为它在执行 setup 函数的时候，就没有把组件实例 instance 传给 setup。也没有把 this 指向实例 instance。So 执行顺序其实是：组件实例创建在 setup 函数执行之前，但是 setup 执行的时候，组件还没有 mounted，而晚于 beforeCreate 钩子，早于 create 钩子。

2: reactive VS ref
刚开始看文档时，大家往往会去拿这两个去对比，总结一下：

reactive API: 可以把一个对象数据变成响应式(等同于 2.x 中的 Vue.observable())，Composition API 更推荐用户主动定义响应式式数据，而非内部的黑盒处理

ref: 针对数组 or 对象本质就是reactive实现的，读取值时是ref.value

另外注意一下toRefs: 针对组合函数返回响应式对对象时使用 toRefs, 本质上是帮我们做了一层getter和setter处理，解构就可以得到响应式的数据，这也就降低了一些关于ref的心智负担

3: 关于 watch:对于监听对象是分隔字符串时，需要在选项参数中指定 deep: true

// vue2.x
watch: {
    'data.distance': function (newVal, oldVal) {
      if (newVal === constants.DISTANCE_ON) {
        ...
      }
    },
},
 
 
// vue3.x
watch(
   () => this.data.distance,
   (newVal, oldVal) => {
        if (newVal === constants.DISTANCE_ON) {
            ...
        }
   },
   { deep: true },
 )
 

4. 配置全局自定义参数

在 Vue2.x 中我们可以通过 Vue.prototype 添加全局属性 property。但是在 Vue3.x 中需要将 Vue.prototype 替换为 config.globalProperties 配置：

// Vue2.x
Vue.prototype.$api = axios;
Vue.prototype.$eventBus = eventBus;

// Vue3.x
const app = createApp({})
app.config.globalProperties.$api = axios;
app.config.globalProperties.$eventBus = eventBus;

5.当接口中的ID过长，无法正常读取时

像这种很长的ID无法正常读取，我们可以使用forEach先将它循环出来，然后在利用BigInt底层把他转换为数组进行读取
 

.then(res => {
            res.data.forEach((item: any) => {
              item.id = BigInt(item.id)
            });
            homeViewData.value = res.data;
            console.log(homeViewData.value);
        });

这就就能很好的读取数据啦

6.修改组件的样式
vue3中可以使用v-deep实现修改，也可以使用内部样式修改（style）