Vue 3 遷移政策筆記—— 第28節：v-bind 合并行為

前言

本筆記主要基于官方文檔《遷移政策——v-bind 合并行為》編寫。如有了解出入，請以官方文檔為主。建議您以官方文檔為主，本文為輔。這樣您可以“以自己為主”審視的閱讀，進而不被我的觀點帶偏。

知識儲備：

《Vue api —— v-bind 》

概述

Vue 3.x 中，

v-bind=“object”

的綁定順序會影響渲染結果。

Vue 2.x 的 v-bind 合并行為

在 Vue 2.x，如果一個元素同時定義了

v-bind="object"

和一個相同的單獨的 property （屬性），那麼這個單獨的 property 總是會覆寫

object

中的綁定。

如下：

<template>
  <div id="red" v-bind="{ id: 'blue' }"></div>
</template>
           

渲染的結果：

可見，單獨的 property 優先級高于

v-bind="object"

裡的 property 。

注意：

“單獨的 property 優先級高于

v-bind="object"

裡的 property” 隻适用于

v-bind="object"

。下面寫法就不适用了：

<template>
  <div id="red" v-bind:id="'blue'"></div>
</template>
           

最終的渲染結果：

Vue 3.x 的 v-bind 合并行為

在 Vue 3.x，如果一個元素同時定義了

v-bind="object"

和一個相同的單獨的 property，那麼聲明綁定的順序決定了它們如何合并，不再是“單獨的 property 優先級高于

v-bind="object"

裡的 property”。如下：

<template>
  <div id="red" v-bind="{ id: 'blue' }"></div>
  <div v-bind="{ id: 'blue' }" id="red"></div>
</template>
           

渲染的結果：

<div id="blue"></div>
<div id="red"></div>
           

本系列目錄

• Vue 3 遷移政策筆記—— 第1節：v-for 中的 Ref 數組
• Vue 3 遷移政策筆記—— 第2節：Async Components 異步元件
• Vue 3 遷移政策筆記—— 第3節：Attribute Coercion Behavior （屬性強制行為）
• Vue 3 遷移政策筆記——第4節：$attrs 包括class&style
• Vue 3 遷移政策筆記—— 第5節：移除 $children
• Vue 3 遷移政策筆記—— 第6節：自定義指令
• Vue 3 遷移政策筆記—— 第7節：自定義元素互動
• Vue 3 遷移政策筆記—— 第8節：Data 選項
• Vue 3 遷移政策筆記—— 第9節：新增 emits 選項
• Vue 3 遷移政策筆記—— 第10節：事件 API
• Vue 3 遷移政策筆記—— 第11節：移除過濾器
• Vue 3 遷移政策筆記—— 第12節：片段
• Vue 3 遷移政策筆記—— 第13節：函數式元件
• Vue 3 遷移政策筆記—— 第14節：全局 API
• Vue 3 遷移政策筆記—— 第15節：全局 API 的 tree shaking
• Vue 3 遷移政策筆記—— 第16節：Inline Template 屬性
• Vue 3 遷移政策筆記—— 第17節：Key 屬性
• Vue 3 遷移政策筆記—— 第18節：按鍵修飾符
• Vue 3 遷移政策筆記—— 第19節：移除 $listeners
• Vue 3 遷移政策筆記—— 第20節：Props 的預設值函數不能通路this
• Vue 3 遷移政策筆記—— 第21節：渲染函數 API
• Vue 3 遷移政策筆記—— 第22節：Slots 的統一
• Vue 3 遷移政策筆記—— 第23節：Transition Class 的變化
• Vue 3 遷移政策筆記—— 第24節：Transition Group 不再需要設定根元素
• Vue 3 遷移政策筆記—— 第25節：v-on.native修飾符被移除
• Vue 3 遷移政策筆記—— 第26節：在元件上使用 v-model 的變化
• Vue 3 遷移政策筆記—— 第27節：v-if 和 v-for 的優先級
• Vue 3 遷移政策筆記—— 第28節：v-bind 合并行為
• Vue 3 遷移政策筆記—— 第29節：數組的監聽