木灵鱼儿

木灵鱼儿

阅读:158

最后更新:2022/08/19/ 1:13:01

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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 158

相关文章