vue3-bate初体验

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战

看详细的话 建议直接点击这里->中文文档

现在可以直接通过npm安装vue3，首先要升级脚手架

查看脚手架的版本

vue -V

从 v4.5.0 开始，vue-cli 提供了内置选项，可在创建新项目时选择 Vue 3 预设。所以如果低于4.5，可以升级

npm install -g @vue/cli

升级之后就可以直接安装vue3了，如下显示

vue create hello-vue3

部分改变：

1.Mixin合并行为变更，浅层次执行合并

2.v-if可以和v-for一起写，v-if优先级更高

3.v-for 和 refs 可以一起使用 ， 不会渲染出refs的数组

4.放弃“枚举 attribute”的内部概念 ， 解决了普通非布尔 attribute 和“枚举 attribute”之间的不一致性

5.Filters 已从 Vue 3.0 中删除，不再受支持。

Prop 验证

组件可以为 props 指定验证要求。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

type 可以是下面原生构造器：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

type 也可以是一个自定义构造器，使用 instanceof 检测。