Skip to content

[vue] 说说你对选项el,template,render的理解 #273

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 说说你对选项el,template,render的理解

Activity

wenyejie

wenyejie commented on Jun 17, 2019

@wenyejie

el: 把当前实例挂载在元素上
template: 实例模版, 可以是.vue中的template, 也可以是template选项, 最终会编译成render函数
render: 不需要通过编译的可执行函数

template和render, 开发时各有优缺点, 不过在线上尽量不要有template

yxllovewq

yxllovewq commented on Mar 10, 2022

@yxllovewq

el:被挂载的dom
template:会被render编译成vdom,在没有提供render选项时,会找template选项,没有template选项,会找el指向的外部template。
render:template最终都会通过render编译成vdom

sc950828

sc950828 commented on Sep 23, 2022

@sc950828

el: 把当前实例挂载在哪个元素上,vue2会替换该元素,vue3不会替换
template:最后都会被编译成渲染函数
render: 渲染函数

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

el选项用于指定Vue实例的挂载目标,
template选项用于定义组件的模板,
render选项提供了更灵活和直接的方式来手动渲染组件。

el

<!-- HTML -->
<div id="app">
  <h1>{{ message }}</h1>
</div>

// JavaScript
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

template

// JavaScript
new Vue({
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello, Vue!'
  }
}).$mount('#app');

render

// JavaScript
new Vue({
  render: function (createElement) {
    return createElement('div', this.message);
  },
  data: {
    message: 'Hello, Vue!'
  }
}).$mount('#app');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wenyejie@haizhilin2013@sc950828@Cai-zhiji@yxllovewq

        Issue actions

          [vue] 说说你对选项el,template,render的理解 · Issue #273 · haizlin/fe-interview