VUE引擎如何评估属性代码？

Question

在 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 的什么地方发生？

Answer 1

整个模板被编译成一个大的 JavaScript 渲染函数。当呈现该元素的 vnode 时，属性和 prop 绑定被内联评估。

这个模板：

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

被编译成类似的东西：

vnode = _c('div', {

  domProps: {

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

  }

})

整个 render 函数被包裹在一条with(this) { ... }语句中，这样组件实例的属性就可以message像this.message.

没有eval()发生，直接执行就好像你手写了render函数一样。模板编译器代码可能会new Function() 在编译时使用来检查语法是否有效，但在应用程序执行期间不会执行此类沙盒。

这个在线 Vue 2 模板编译器展示了如何将模板编译成渲染函数。

Vue 3 以不同的方式编译模板并且更加优化。使用Vue Template Explorer来试验一下。