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来试验一下。