深入理解vue.js——组件-阿里云开发者社区

开发者社区> 开发与运维> 正文

深入理解vue.js——组件

简介: 熟悉vue或者研究过vue源码的同学都知道,组件是vue最重要的部分之一,而写组件由两种常见的方式: template模板 render渲染函数式的 template式的组件 template式的组件有两种常见的形式: 第一种: {{ msg }} Vue.

熟悉vue或者研究过vue源码的同学都知道,组件是vue最重要的部分之一,而写组件由两种常见的方式:

  • template模板
  • render渲染函数式的

template式的组件

template式的组件有两种常见的形式:

第一种:

<template>
    <div class="hello">
        {{ msg }}
    </div>
</template>

<script>
Vue.component('hello', {
    data() {
        return {
            msg: 'hello world.'
        }
    }
})
</script>

第二种:

Vue.component('hello', {
    data() {
        return {
            msg: 'hello world.'
        }
    },
    template: `<div class="hello"> {{ msg }} </div>`
})

在项目开发中,第一种比较常见。

render渲染函数组件

同样,vue本身也提供了性能更高的render函数渲染的组件。

Vue.component('hello', {
    data() {
        return {
            msg: 'hello world.'
        }
    },
    render: function(el) {
        return el(
            'div',
            this.msg
        )
    }
})

关于render的用法,可以参考vue.js官方文档介绍。地址

关于render的示例,可以参考bootstrap-vue的源码,它的组件很多都是使用render的。GitHub地址

render函数渲染 VS template模板

  • 后者适合逻辑简单,前者适合复杂逻辑。
  • 后者属于声明是渲染,前者属于自定Render函数。声明式渲染,使用者理解起来相对容易,但灵活性不足;自定义render函数灵活性高,但对使用者要求较高。
  • 前者的性能较高,后者性能较低。这一点我们可以看一下,下图中vue组件渲染的流程图可知。
  • 基于上一点,我们通过vue组件渲染流程图知道,使用render函数渲染没有编译过程,相当于使用者直接将代码给程序。所以,使用它对使用者要求高,且易出现错误。
img_8dfe0c48406f44c60b1bd0493b592946.png
vue组件渲染的流程图

特殊组件

在vue中有一个特殊的组件,示例代码如下:

var vm = new Vue({
    data() {
        return {
            msg: 'hello world.'
        }
    },
    el: '#app'
})

这个特殊的组件指定我们使用vue的容器,并初始化一些数据。

虚拟DOM

虚拟DOM是vue.js的核心概念之一,vue.js使用js模拟DOM原型树,这就是我们常挂在嘴边的VNode。

vue.js发现模板的数据发生改变(vue是数据驱动的框架,这也是MVVM与传统的DOM结构驱动的区别),将会生成新的虚拟DOM,vue.js通过Diff算法来对比跟原来的Vnode是否相同来决定是否渲染该虚拟DOM,不相同则渲染。同时,vue2.x支持服务端的渲染。

后续可能还会继续修改,也欢迎各位批评指正。有问题或者有其他想法的可以在我的GitHub上pr。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章