vue3迁移指南笔记

刘嘿哈

发布于 2022-10-25 14:10:47

4460

发布于 2022-10-25 14:10:47

文章被收录于专栏：js笔记

Composition API 1.setup选项是组合API的入口点 2.利用reactive实现数据相应式，利用ref将基础数据类型包装成对象类型，使用reactive包裹
teleport 传送作用：使组件挂载到指定元素中，避免多层嵌套的弹框样式不好处理

const app = Vue.createApp({});

app.component('modal-button', {
  template: `
    <button @click="modalOpen = true">
        Open full screen modal! (With teleport!)
    </button>

    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! 
          (My parent is "body")
          <button @click="modalOpen = false">
            Close
          </button>
        </div>
      </div>
    </teleport>
  `,
  data() {
    return { 
      modalOpen: false
    }
  }
})

app.mount('#app')

碎片/片段 1.vue3中正式支持多根节点组件，即片段 2.要求开发人员明确的定义如何分配属性
emits 选项即事件也要像props 一样，在子组件中声明，也可有对应的校验规则，将使用组件事件代替本机事件侦听器。

app.component('custom-form', {
  emits: {
    // No validation
    click: null,

    // Validate submit event
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
})

v-model 替代了.sync修饰符 1.除了.trim、.number、.lazy，可以自定义修饰符，

<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: () => ({})
    }
  },
  emits: ['update:modelValue'],
  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"
    :value="modelValue"
    @input="emitValue">`

对于v-model带有参数的绑定，生成的prop名称将为arg + "Modifiers"：

createRenderer 自定义渲染器根据不同平台的特性，自定义更新/插入/删除/创建等方法，轻松实现跨平台

import { createRenderer } from '@vue/runtime-core'

const { render, createApp } = createRenderer({
  patchProp,
  insert,
  remove,
  createElement,
  // ...
})

// `render` is the low-level API
// `createApp` returns an app instance with configurable context shared
// by the entire app tree.
export { render, createApp }

export * from '@vue/runtime-core'

同一节点上， v-if优先及大于v-for优先及
v-bind="obj" 和普通属性优先及为写在后面的覆盖写在前面
v-on:event.native 修饰符被移除

<script>
  export default {
    emits: ['close']
  }
</script>

for循环中ref不在自动创建数组 $refs 在Vue 3中，这种用法将不再在中自动创建数组$refs。要从单个绑定中检索多个引用，请绑定ref到一个提供更大灵活性的函数（这是一个新功能）：

<div v-for="item in list" :ref="setItemRef"></div>

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-03-31，如有侵权请联系 cloudcommunity@tencent.com 删除

react