vue组件视图模板最终被编译为了什么?

vue组件中template模板会webpack / vite 等构建工具预编译为一个纯js的渲染函数, 如下所示

• vue3示例

    <template>
        <div>
            <h1>hello</h1>
            <button @click="updateMsg">更新数据</button>
        </div>
    </template>
    <script>
       import {ref} from 'vue'
       export default {
           setup(){
               const msg=ref('hello')
                const updateMsg=()=>{
                    msg.value='你好'
                }
                return {
                    msg,updateMsg
                }
           }
       }
    </script>

• 上边所示模板视图代码和如下代码最终渲染结果一致

import {h,ref} from 'vue'
export defualt {
    setup(){
        const msg=ref('hello')
        const updateMsg=()=>{
            msg.value='你好'
        }
        return {
            msg,updateMsg
        }
    },
    // render渲染函数作用和template视图模板的作用一致, 都是创建视图虚拟节点
    render(h){
        return h('div',{},[
            h('h1',{},msg.value),
            h('button',{
               onClick:updateMsg
            },'更新数据')
        ])
    }
}

render渲染函数作用和template视图模板的作用一致, 都是创建视图虚拟节点, 之后会间接生成VirtualDOM.

template视图模板语法和html语法基本一致, 目的只是为了提高开发效率. 在通过构建工具对组件进行预编译的时候, 开发者所编写的template视图模板的内会被构建工具预编译成_sfc_render渲染函数( 作用和上边所属写的render函数作用一致 ), _sfc_render被执行后会间接得到VirtualDOM.

在webpack开发环境下, template到_sfc_render函数的转换通常由vue-loader来完成