亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

VUE引擎如何評估屬性代碼?

VUE引擎如何評估屬性代碼?

慕桂英4014372 2023-04-27 17:19:11
在 VUE 中,可以在屬性中編寫完整的 JS 表達式。例如,對于<div>以下內容,var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', num: 3 } })<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">  <input v-model="message"/>  <div v-html="'abc' + ' ' + message + ' ' + 2 * num"></div></div>結果是abc HelloVue! 6。VUE 是如何計算這個結果的?某種沙盒eval?這個計算在VUE 的 repo 的什么地方發生?
查看完整描述

1 回答

?
搖曳的薔薇

TA貢獻1793條經驗 獲得超6個贊

整個模板被編譯成一個大的 JavaScript 渲染函數。當呈現該元素的 vnode 時,屬性和 prop 綁定被內聯評估。


這個模板:


<div v-html="'abc' + ' ' + message + ' ' + 2 * num"></div>

被編譯成類似的東西:


vnode = _c('div', {

? domProps: {

? ? "innerHTML": _s('abc' + ' ' + message + ' ' + 2 * num)

? }

})

整個 render 函數被包裹在一條with(this) { ... }語句中,這樣組件實例的屬性就可以messagethis.message.

沒有eval()發生,直接執行就好像你手寫了render函數一樣。模板編譯器代碼可能會new Function()?在編譯時使用來檢查語法是否有效,但在應用程序執行期間不會執行此類沙盒。

這個在線 Vue 2 模板編譯器展示了如何將模板編譯成渲染函數。

Vue 3 以不同的方式編譯模板并且更加優化。使用Vue Template Explorer來試驗一下。


查看完整回答
反對 回復 2023-04-27
  • 1 回答
  • 0 關注
  • 118 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號