从Vue2到Vue3学习汇总知识点（三）：不兼容的变更之模板篇

不兼容的变更之模板篇

1、v-model

在Vue2.x使用v-mode和v-bind.sync

<ChildComponent v-model="pageTitle" />
** 在某些情况下，我们可能需要对某一个 prop 进行“双向绑定，并使用emit的方式更新
<ChildComponent :title.sync="pageTitle" />
this.$emit('update:title', newValue)

Vue3.x使用v-model

** 使用多个v-model取代.sync
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
** 注： 不带参数的v-model需要使用this.$emit('update:modelValue', '')进行响应

v-model现在支持自定义的修饰符
<ChildComponent v-model.capitalize=“pageTitle” />
自定义修饰符使用传送门

2、<template v-for> 和非 v-for 节点（条件分支）上的 key 用法

templae上的key

在 Vue 2.x 中， 标签不能拥有 key。不过，你可以为其每个子节点分别设置 key。
在 Vue 3.x 中，key 则应该被设置在 <template> 标签上。**

<!-- Vue 2.x -->
<template v-for="item in list">
  <div :key="'heading-' + item.id">...</div>
</template>
<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div>...</div>
</template>

条件分支上的key

在 Vue 2.x 中，建议在 v-if/v-else/v-else-if 的分支中使用 key。
vue3.x中不再建议在 v-if/v-else/v-else-if 的分支中继续使用 key attribute，因为没有为条件分支提供 key 时，也会自动生成唯一的 key。**

<!-- Vue 2.x -->
<div v-if="condition" key="yes">Yes</div>
<div v-else key="no">No</div>
<!-- Vue 3.x -->
<!-- Vue 3.x -->
<div v-if="condition">Yes</div>
<div v-else>No</div>

3、v-if 与 v-for 的优先级对比

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。
3.x 版本中 v-if 总是优先于 v-for 生效。

4、v-bind的绑定顺序

在 2.x 中，如果一个元素同时定义了 v-bind=“object” 和一个相同的独立 attribute，那么这个独立 attribute 总是会覆盖 object 中的绑定。

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="red"></div>

在 3.x 中，如果一个元素同时定义了 v-bind=“object” 和一个相同的独立 attribute，那么绑定的声明顺序将决定它们如何被合并。

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="blue"></div>

<!-- 模板 -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 结果 -->
<div id="red"></div>

5、移除v-on.native 修饰符

在2.x中，默认情况下，传递给带有 v-on 的组件的事件监听器只能通过 this.$emit 触发。要将原生 DOM 监听器添加到子组件的根元素中，可以使用 .native 修饰符

在3.x中，v-on 的 .native 修饰符已被移除。（未定义的事件监听器会作为原生的事件添加到根元素）同时，新增的 emits 选项允许子组件定义真正会被触发的事件。

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

MyComponent.vue 👇
** 确保所有组件都使用 emits 选项记录其事件。
<script>
  export default {
    emits: ['close'] 
  }
</script>

6、v-for 中的 Ref 数组

在 Vue 2 中，在 v-for 中使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。

在 Vue 3 中，此类用法将不再自动创建 $ref 数组。要从单个绑定获取多个 ref，请将 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
    }
  }
}

7、自定义元素

自主定制元素

如果我们想要在 Vue 外部定义添加自定义元素 (例如使用 Web Components API)，则需要“指示”Vue 将其视为自定义元素。

<plastic-button></plastic-button>

在 Vue 2.x 中，通过 Vue.config.ignoredElements 将标签配置为自定义元素

Vue.config.ignoredElements = ['plastic-button']

在 Vue 3.0 中，此检查在模板编译期间执行。要指示编译器将 视为自定义元素：

• 如果使用构建步骤：给 Vue 模板编译器传入 isCustomElement 选项。如果使用了 vue-loader，则应通过 vue-loader 的 compilerOptions 选项传递：

// webpack 中的配置
rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag === 'plastic-button'
      }
    }
  }
  // ...
]

• 如果使用动态模板编译，请通过 app.config.compilerOptions.isCustomElement 传递：

const app = Vue.createApp({})
app.config.compilerOptions.isCustomElement = tag => tag === 'plastic-button'

定制内置元素、使用 vue: 前缀来解决 DOM 内模板解析问题

较少使用，详细文档传送门