vue的三个核心功能

今年的五一也还好，江苏大风，火车停运，耽搁了两天才回到家，但是一大家子拍了全家福，也算是办了一件非常有意义的事。

前情回顾

上篇文章简单梳理了一下常用的loader，有处理文件的，进行语法转化的，处理样式的，进行测试的等等。今天随便聊一下吧，写到哪儿是哪儿。

Vue的三个主要功能

闲着的时候又把Vue的源码大致浏览了一遍，细节记得不多。整体都是零零碎碎的，一直希望自己能够把中间的流程以及细节能够完整的在复述出来，无奈自己能力有限，有时间了就看看，能记住多少记多少吧。

其实从我们日常写的vue项目的.vue文件中，我们可以得出以下结论：vue的主要功能有以下几点

• 解析并渲染html模板
• 解析并执行js
• 解析并渲染css样式

因为我们平时写的.vue文件基本都是以下内容：

<template>
  <div>this is content to be render</div>
</template>
<script>
export default {
  data(){
    return {

    }
  },
  created(){

  },
  methods:{

  }
}
</script>
<style>
.demo{
  background:#ddd;
}
</style>

基本上就是上面说的三个部分html模板，js部分和css样式。

Vue源码目录结构

Vue源码目录结构

如果指定一个概念作为vue的核心，个人认为这个概念一定是虚拟Dom。因为双向绑定,props,computed,watcher以及sfc(file system check)这些概念都是基于对虚拟Dom的解析过程产生的。

虚拟dom这个东西，单纯的看源码中的定义的话，似乎有些晦涩难懂，但是源码的文档中标明参考了snabbdom,可以先看下这个snabbdom,有可能细节看的不大明白，但是对虚拟dom的理解肯定是有帮助的。

而源码的core文件夹中vue的示例，其实就是个构造函数，所有的全局函数global-api也都是通过vue.prototype设置上去的，比如el,del,remove,emit...

而对于钩子函数，其实就是一种隔离变化的手段。对于Vue构造函数而言，本身就是个模板方法，相当于一个父类，我们可以在父类中放置钩子函数，给它一个默认的实现，然后子类根据需要去决定要不要执行这个钩子。

javascript基础知识总结