Intact组件的一个重要的属性是template,它本质上是个模板函数,只是当你传入模板字符串时,Vdt会将它编译成模板函数。在了解template属性的更多细节之前,我们先来看看编译后的模板函数是什么样子。

    1. var title = 'Title';
    2. <div>
    3. <h1>{title}</h1>
    4. <p v-if={self.get('show')}>show</p>
    5. <p v-else>hide</p>
    6. </div>

    我们调用Intact.Vdt.compile(source[, options])手动编译它。

    可以看到,编译出来的模板函数,有以下细节:

    1. 3个参数,obj表示传入模板的数据,_Vdt是Vdt对象,等于Intact.Vdtblocks为子模板定义的<b:block>,用于模板继承。
    2. 函数开头定义了许多帮助函数,其中最重要的是h函数,它用于创建虚拟DOM
    3. 函数定义self & scope变量,函数的this指向Vdt实例,大部分情况下self === scope,都指向传入模板的数据,但当模板用于继承时,他们是不相等的,此时this依然指向组件实例,而scope指向继承时传入父模板的数据。
    4. 最后返回一个由h函数创建出来的虚拟DOM

    Intact.Vdt.compile()编译出来的函数,默认使用with语法,你可传入options = {noWith: true}来去掉它。