vue3 杂项

data选项

在vue3中，data选项已标准化为仅接受 function返回一个 object，在vue2的时候，data可以直接是一个object。

vue2：

<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

vue3:

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>

mixin 合并行为变更

虽然说vue3已经不再推荐使用mixin混入，但是还是提供了支持，但是由原来vue2的深度合并变成了浅合并。

假设我们现在有数据需要合并：

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}

const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}

vue2 得到的结果：

{
  "user": {
    "id": 2,
    "name": "Jack"
  }
}

vue3则是后一个覆盖前一个了：

{
  "user": {
    "id": 2
  }
}

自定义组件白名单

如果我们使用了自定义渲染器，那么在控制台，一般会输出一条警告，如果想要去除这个警告，我们需要配置一下自定义组件的白名单。

vue cli：

vue.config.js

rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag === "自定义的组件名称"
      }
    }
  }
]

vit：

vite.config.js

module.exports = {
  vueCompilerOptions: {
    isCustomElement: tag => tag === "自定义的组件名称"
  }
}

自定义组件是一个函数，它接受一个tag（组件名），返回一个布尔值

配置完重启下项目，就不会再报警告了。

is

is一般用于动态组件，是一个特殊的attribute属性。

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

但是有时候，我们的可能受于html的结构导致有些组件无法直接写在html中，比如table元素，它要求他的子元素必须是表格相关的元素，如果我们放入一个自定义的元素会导致结构发生问题，此时常见的做法使用一个tr元素，然后tr去设置is属性。

vue3中要求is的值必须是vue:开头的，这个和vue2不同。

<table>
  <tr is="vue:my-row-component"></tr>
</table>

最终这个tr会被组件给完全替换掉。

$scopedSlots属性移除，采用$slots

vue2的时候，获取插槽的数据需要通过this.$scopedSlots来获取，或者this替换成任意实例组件，在vue3时，则是通过this.$slots获取。

具体可以参考官方文档，这个我自己也用的少。

$slots