1: v-if與v-for的優(yōu)先級(jí)（更新）

原則上迈螟，在vue中應(yīng)該避免在同一元素上使用 v-if 與 v-for 的。

• 2.x：v-for 的優(yōu)先級(jí)高于 v-if
• 3.x：v-if 的優(yōu)先級(jí)高于 v-for

2: 關(guān)于 computed: 3.X 把 computed 變成了一個(gè)計(jì)算屬性 API尔崔，所以可以有多個(gè) computed答毫，可以沿用 Vue.js 2.x 的使用方法

// vue2.x
computed: {
  loading() {
    return !this.list.length
  }
},

// vue3.x
const loading = computed(() => !this.list.length)
const titleList = computed(() => {
return props.data.map((item) => item.title)
})

3: 關(guān)于 watch:對(duì)于監(jiān)聽(tīng)對(duì)象是分隔字符串時(shí)，需要在選項(xiàng)參數(shù)中指定 deep: true

// vue2.x
watch: {
    'data.distance': function (newVal, oldVal) {
      if (newVal === constants.DISTANCE_ON) {
        ...
      }
    },
},

// vue3.x
watch(
   () => this.data.distance,
   (newVal, oldVal) => {
        if (newVal === constants.DISTANCE_ON) {
            ...
        }
   },
   { deep: true },
 )

4: 在 Vue3 中組件沒(méi)有filters選項(xiàng)季春，遷移過(guò)程中洗搂，可以用computed/methods替代

// vue2.x
filters: {
    // just a method
    dateFormat,
},

// vue3.x
const dateFormat = computed(() => {
    // just a method
    dateFormat,
})

5: vue3.X 中去掉了.sync,用v-model代替 并且同一個(gè)組件中不僅限于只有一個(gè)v-model

<!-- vue2.x -->
<!-- 父組件 -->
<template>   
    <p>{{title}}</p>
    <syncDemo :title.sync="title"> </syncDemo>
</template>
 
<!-- 子組件 -->
<template>
  <div>
    <!--約定該事件名，必須為update:后加上需要更新的props即title-->
    <button @click="$emit('update:title','aaa123')">點(diǎn)我</button>
  </div>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
    }
  }
}
</script>


<!-- vue3.x -->
<!-- 父組件 -->
<template>
    <!-- 自定義 v-model -->
    <p>{{title}}</p>
    <CustomVModel v-model="title"/>
</template>
 
<!-- 子組件 -->
<template>
  <div>
    <button @click="$emit('update:title','aaa123')">點(diǎn)我</button>
  </div>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
    }
  }
}
</script>

6: v-bind的合并策略（更新）

在同一個(gè)元素上鹤盒，對(duì)某個(gè)屬性同時(shí)使用單屬性和使用v-bind同時(shí)定義，就像下面這樣：

<!-- 情況1 -->
<div id="abc" v-bind="{ id: 'def' }"></div>
<!-- 情況2 -->
<div v-bind="{ id: 'def' }" id="abc"></div>

上面兩種情況會(huì)被編譯成下面的結(jié)果：

<!-- vue2.x -->
<!-- 情況1/情況2   單個(gè)屬性的值優(yōu)先級(jí)更好侦副，會(huì)覆蓋掉使用 v-bind 所定義的屬性-->
<div id="abc"></div>

<!-- vue3.x -->
<!-- 情況1 -->
<div id="def"></div>
<!-- 情況2 -->
<div id="abc"></div>

7: keyCodes（更新）

在2.X中侦锯，為一些元素綁定鍵盤(pán)事件的方式是只用 keyCodes 來(lái)標(biāo)識(shí)不同的按鍵，keyCodes 作為修改 v-on 的一種方式：

<!-- keyCode version -->
<input v-on:keyup.13="submit" />

<!-- alias version -->
<input v-on:keyup.enter="submit" />

<!-- 還可以通過(guò)全局配置來(lái)定義一些常用按鍵的別名 -->
<!-- keyCode version -->
<input v-on:keyup.112="showHelpText" />

<!-- custom alias version -->
<input v-on:keyup.f1="showHelpText" />

Vue.config.keyCodes = {
  f1: 112
}

在3.x中秦驯，由于 keyboardEvent.keyCode 已棄用尺碰，因此不在支持此功能，取而代之的是將 kebab-case 名稱作為修飾符：

<input v-on:keyup.delete="confirmDelete" />
<input v-on:keyup.c="confirmC" />