vue源码解读（一）vue简览

前言

自毕业后忙忙碌碌的完成公司的各种业务需求，却忘了学习的重要性，自此重启搁浅的vue源码计划。 之后的源码阅览版本主要为"vue": "^2.6.11"

正文

1.基本使用

在引入vue资源之后，通过用 Vue 函数即可创建一个新的 Vue 实例

这里简单介绍一下h函数的三个参数

• 参数一：一个html标签名，一个组件或者一个异步组件，或者函数式组件（必要）
• 参数二：与attr,prop 和事件相对应的对象（可选），不写的话最好用null占位
• 参数三：子VNode,使用h()函数构建，或者使用字符串获取文本VNode或者有插槽的对象（可选

new Vue({
  el: "#app",
  render: (h) => h(
      "div",
      {class: "app"},
      [h("h2", null, '标题')]
    )
});

2.生命周期

关于vue的生命周期也是老生常谈了，这里简单介绍一下

• Vue实例从创建到销毁的这一过程叫做vue的生命周期.
• 过程:开始创建—>初始化数据—>编辑模板—>挂载DOM($el)---->UI渲染—>数据更新---->卸载

3.常用语法和概念

• 插值表达式：{{}}
• 指令：v-once v-show v-if v-else v-html等等
• 计算属性和侦听器：computed watch
• 条件渲染和列表渲染：v-for v-if v-show
• 表单输入值绑定：v-model
• 组件：可以复用的vue实例
• 插槽：vue-router中的router-link就是一个插槽
• 插件：常用的如vuex vue-router
• 混入mixin：将可以复用的代码独立出来