【Vue】说说你对DOM选项el、template、render的理解？

时间：2021-02-17 23:55:19 阅读：47 评论：0 收藏：0 [点我收藏+]

`1、el`

提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。

因为所有的挂载元素会被Vue生成的DOM替换。因此不推荐挂载Vue实例到html或者body上。
如果在const vm = new Vue({})中存在这个选项，实例将立即进入编译过程，否则，需要显式调用vm.$mount()手动开启编译。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">我是el挂载的内容:小明今年{{age}}岁了</div>
    </body>
    <script>
        const vm= new Vue({
            el:‘#app‘,
            data:{
                age:17
            },
        }
    </script>
</html>

<script>
    const vm= new Vue({
        data:{
            age:17
        },
    })
    vm.$mount(‘#app‘)
</script>

技术分享图片

2、`template`

一个字符串模板作为Vue实例的标识使用。如果el存在，模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

<script>
    const vm= new Vue({
        el:‘#app‘,
        data:{
            age:17
        },
        template:‘<div>我是template的内容:小明今年{{age}}岁了</div>‘,
    })
</script>

如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。

<script type="x-template" id="mb">
    <div>我是template的内容:小明今年{{age}}岁了</div>
</script>
<script>
    const vm= new Vue({
        el:‘#app‘,
        data:{
            age:17
        },
        template:‘#mb‘,
    })
</script>

<body>
    <div id="app">
        我是el挂载的内容:小明今年{{age}}岁了
    </div>
    <template id="mb">
        <div>我是template的内容:小明今年{{age}}岁了</div>
    </template>
</body>
<script>
    const vm= new Vue({
        el:‘#app‘,
        data:{
            age:17
        },
        template:‘#mb‘,
    })
</script>

技术分享图片

`3、render`

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            我是el挂载的内容:小明今年{{age}}岁了
        </div>
    </body>
    <script>
        const vm= new Vue({
            el:‘#app‘,
            data:{
                age:17
            },
            template:‘<div>我是template的内容:小明今年{{age}}岁了</div>‘,
            render(h){
                return h(‘div‘,`我是render的内容:小明今年${this.age}岁了`)
            }
        })
    </script>
</html>

技术分享图片

4、总结：

当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。
换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。