Vue中的優(yōu)先級(jí)設(shè)置很重要，它影響著組件的更新和渲染。在Vue中設(shè)置優(yōu)先級(jí)主要有以下幾種方式：

1.計(jì)算屬性的優(yōu)先級(jí)：

<div id="app">
<p>{{ message() }}</p>
<p>{{ computedMessage() }}</p>
</div>
new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
message: function () {
console.log('message')
return this.msg
}
},
computed: {
computedMessage: function () {
console.log('computedMessage')
return this.msg
}
}
})

在上面的代碼中，message和computedMessage都會(huì)輸出hello，但是計(jì)算屬性computedMessage的優(yōu)先級(jí)比較高，當(dāng)msg改變時(shí)，computedMessage先更新，然后才是message。

2.監(jiān)聽watch的優(yōu)先級(jí)：

new Vue({
el: '#app',
data: {
msg: 'hello'
},
watch: {
msg: function () {
console.log('watch msg')
},
computedMsg: function () {
console.log('watch computedMsg')
}
},
computed: {
computedMsg: function () {
console.log('computedMsg')
return this.msg
}
},
methods: {
changeMsg: function () {
this.msg = 'world'
}
}
})

在上面的代碼中，當(dāng)msg改變時(shí)，會(huì)先更新computedMsg，然后才會(huì)更新watch computedMsg。

3.v-for的優(yōu)先級(jí)：

<div id="app">
<p v-for="item in list">{{ item }}</p>
</div>
new Vue({
el: '#app',
data: {
list: [1, 2, 3]
},
mounted: function () {
this.list.splice(1, 1, 4)
}
})

在上面的代碼中，mounted鉤子函數(shù)中改變list的值時(shí)，頁面會(huì)先刪除原來的2，然后再插入4，這是因?yàn)関ue會(huì)先渲染出原來的列表，然后再根據(jù)data中的值更新視圖。

4.v-if和v-show的優(yōu)先級(jí)：

在使用v-if和v-show時(shí)，v-if的優(yōu)先級(jí)高于v-show。當(dāng)v-if的值變?yōu)閒alse時(shí)，整個(gè)元素會(huì)被完全卸載，而v-show只是控制元素的顯示隱藏。

5.directives的優(yōu)先級(jí)：

Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
new Vue({
el: '#app'
})

在上面的代碼中，定義了一個(gè)全局指令focus，在mounted和其他生命周期中都無法使用，但是可以在模板中使用v-focus指令。

總結(jié)：

Vue中不同的優(yōu)先級(jí)設(shè)置不同的更新和渲染順序，能夠更好的優(yōu)化組件性能。在編寫Vue組件時(shí)候，應(yīng)該對(duì)每一個(gè)優(yōu)先級(jí)設(shè)置進(jìn)行仔細(xì)考慮。