vue3.0 体验服，个人体验小结

动态属性

<a v-bind:[attributeName]="url"> ... </a> // 属性
<a v-on:[eventName]="doSomething"> ... </a> // 事件
简写：
<a :[attributeName]="url"> ... </a>
<a @[eventName]="doSomething"> ... </a>

表单验证简写

<input v-model.number="age" type="number" />
<input v-model.trim="msg" />

验证发射事件

app.component('custom-form', {
  emits: {
    // 没有验证
    click: null,
    // 验证提交事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    submitForm() {
      this.$emit('submit', { email, password })
    }
  }
})

在3.x中，添加到组件的修饰符v-model将通过modelModifiers属性提供给组件

<div id="app">
  <my-component v-model.capitalize="myText"></my-component>
  {{ myText }}
</div>

const app = Vue.createApp({
  data() {
    return {
      myText: ''
    }
  }
})
app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `<input
    type="text"
    v-bind:value="modelValue"
    v-on:input="emitValue">`
})
app.mount('#app')})

命名插槽速记

// 原来的v-slot 改为 #,不过原来省略的default插槽名要加上。
<todo-list #default="{ item }">
  <i class="fas fa-check"></i>
  <span class="green">{{ item }}<span>
</todo-list>

props的选项，跟ant design一样啊

type 数据类型
default 默认值
required 是否必须
validator 自定义验证函数

增加了两个生命周期

扫描二维码关注公众号，回复： 11618974 查看本文章

在keep-alive中的组件才具有，

activated：进入时执行一次，回退到该组件时执行，不再执行其他生命周期
deactivated：离开时执行一次。

反应性api

balabala一大堆。。。待写demo

没有bus总线，移除了 $on,$ off事件，只保留$emit事件，用于父子事件监听

以前this.xxx的写法，比如this.$nextTick()改为了import { nextTike } from 'vue'，然后再使用.

很大的写法都借鉴了react hook。

vue3.0 体验服，个人体验小结

猜你喜欢