vue3迁移指南笔记

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

const app = Vue.createApp({});

app.component('modal-button', {
  template: `
    
        Open full screen modal! (With teleport!)
    

    
      

        

          I'm a teleported modal! 
          (My parent is "body")
          
            Close
          
        
      
    
  `,
  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，可以自定义修饰符，

  
  {{ myText }}

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: ``

对于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 修饰符被移除

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

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
    }
  }
}