Vue 渲染方式：render 和 template的区别

最新推荐文章于 2024-02-22 08:15:00 发布

嘿哈哈哈

最新推荐文章于 2024-02-22 08:15:00 发布

阅读量1.2k

点赞数 2

分类专栏： Vue2 前端设计文章标签： vue.js javascript 前端 render template

本文链接：https://blog.csdn.net/qq_39384184/article/details/121804141

版权

26 篇文章 1 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

render 和 template

render渲染方式可以让我们将js发挥到极致，因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强，适合复杂的组件封装。
template是类似于html一样的模板来进行组件的封装。
render的性能比template的性能好很多
render函数优先级大于template

<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</body>

new Vue({
  // 元素 element
  el: '#app',
  template: `
    <div>{{n}}</div>
  `,
  data: {
    n: 0
  }
})

<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</body>

new Vue({
  // 元素 element
  el: '#app',
  render(h){
      // 创建一个div 里面是 n
    return h('div', this.n)
  },
  data: {
    n: 0
  }
})

关注