Vue組件渲染是通過Vue模板解析和虛擬DOM實現的。當Vue組件被渲染時，其相關數據將被解析并交由虛擬DOM管理

Vue.component('my-component', {
template: '
{{ msg }}
',
data: function () {
return {
msg: 'Hello Vue!'
}
}
})

以上代碼創建了一個名為"my-component"的組件，渲染一個DIV元素，其中包含了"msg"數據。當Vue實例化組件時，會調用其"template"中的數據并輸出"Hello Vue!"

組件渲染的觸發可以分為兩種：第一種是在組件初始化階段，當Vue實例化組件時，會從根組件開始遞歸地渲染子組件，直至所有組件被渲染完成；第二種是在組件數據發生變化時，組件將重新渲染。這種情況下，Vue將會檢測到數據的變化，并通過虛擬DOM對變化進行了計算并將變化應用到組件中。

var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

以上代碼創建了一個Vue實例，并將其掛載到ID為"app"的DOM元素上，其中包含了一個名為"message"的數據。當數據發生變化時，組件將自動重新渲染：

vm.message = 'Goodbye Vue!'

組件的渲染也可以被手動觸發。當需要手動觸發組件的渲染時，可以通過$forceUpdate()方法強制組件重新渲染。

Vue.component('counter', {
template: '
{{ counter }}
',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
}
},
mounted: function () {
setInterval(() =>{
this.$forceUpdate()
}, 1000)
}
})

以上代碼創建了一個簡單的計數器組件，每秒鐘重新渲染一次。通過$forceUpdate()方法強制組件重新渲染，實現了計數器的實時更新。

總的來說，Vue組件的渲染觸發包括兩種情況：組件初始化和組件數據變化。通過手動觸發組件的渲染，可以實現組件的動態更新。Vue的渲染機制基于模板解析和虛擬DOM，實現了高效、穩定的組件渲染。