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's repo 的什么地方？

Answer 1

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

此模板：

<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() 检查语法是否有效，但在应用程序执行期间不会执行此类沙盒。

This online Vue 2 template compiler 展示了模板是如何编译成渲染函数的。

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

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

How does VUE engine evaluates attribute code?

javascript

eval

sandbox

vue.js