深入理解vue.js——组件

缘自世界

熟悉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函数渲染没有编译过程,相当于使用者直接将代码给程序。所以,使用它对使用者要求高,且易出现错误。

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。

阅读 4.7k

前端周分享
我需要一个苹果,一个可以与你交换的苹果

心态很重要,我始终相信没有不会做的,只有不想做的,在这个人人都聪明的今天,你不凭智慧,只需努力就...

3.5k 声望
8.4k 粉丝
0 条评论

心态很重要,我始终相信没有不会做的,只有不想做的,在这个人人都聪明的今天,你不凭智慧,只需努力就...

3.5k 声望
8.4k 粉丝
文章目录
宣传栏