迷你版Vue--学习如何造一个Vue轮子

项目地址

文档

MVVM

先来科普一下MVVM的概念及原理

配套插件

mini-vuex

实现一个迷你版的vue

实现的功能

全局方法

// 继承MiniVue 产生一个新的子类构造函数
MiniVue.extend
// 在实例化过程完成后运行
MiniVue.nextTick
// 注册自定义指令
MiniVue.directive
// 过滤器
MiniVue.filter
// 组件 包括slot props
MiniVue.component
// 插件
MiniVue.use
// 混入
MiniVue.mixin

mixin filter component也可以局部注册 在new一个实例时提供以下选项即可

filters
components
mixin

实例方法

vm.$watch
vm.$set
vm.$delete
vm.$on
vm.$once
vm.$off
vm.$emit
vm.$nextTick

指令

v-text
v-html
v-show
v-if
v-else
v-for
v-on
v-bind
v-model

计算属性

计算属性用法也和Vue一样

生命周期

init
created
beforeCompiled
compiled
destroyed

以上实现的功能用法和Vue一模一样

如何阅读源码

阅读源码要带有目的去看 不能毫无目的的去看源码 以免掉进无尽的细节陷阱中而出不来

Vue源码要怎么看呢

建议从一个Vue实例化的过程开始 一直跟踪这条主线 直到结尾为止(一定要打断点 debugger 我打了100多个断点才看懂主流程) 各种分枝暂时不要管 等把主线理解清楚了 细枝末节自然不在话下

Vue1.0模块

在Vue主线里和数据双向绑定有关的有以下几个模块

  • Vue构造函数
  • 观察者observer
  • 观察者watcher
  • 指令系统 directive类和directives指令函数集合
  • DOM解析compile
  • watcher与observer之间的联系者dep

我们来看看他们之间的关系

如果不是想自己实现一个mvvm框架 Vue的源码不用细读 只要明白主线的运行过程就行了 想要熟练使用Vue看官方文档即可

想了解主线流程的 可以看看我的v0.1版本 300行代码 完整的实现了双向数据绑定的流程 还有3条指令的实现过程 其实其他的指令即使没实现 也没什么关系 主流程明白即可

MiniVue v0.1

学习Vue源码推荐看这篇文章

原文地址：https://www.cnblogs.com/woai3c/p/10245802.html

时间： 2024-10-25 00:35:47

迷你版Vue--学习如何造一个Vue轮子的相关文章

vue学习笔记-初始化一个vue项目(1)

1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版构建应用vue init webpack web04 3.安装vue-routercnpm install vue-router --save-dev4.npm run dev 简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件,官方推荐命名法 |-pac

一、vue：如何新建一个vue项目

比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须是3.0.0以上 2.python 2.7.* 3.安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 4.cnpm i cooking-cli -g //npm install -g vue-cli 5. co

vue学习笔记之初识vue——实例方法声明

如果需要在点击鼠标时,执行一个复杂的操作,那么采用单一的表达式 作为v-on指令值就不够了 -- 我们需要将复杂的操作封装为Vue实例的 一个方法,然后将v-on指令的值设置为这个方法. 使用methods配置项来声明Vue实例的方法.当Vue.js创建一个Vue实例时, 会将methods配置项中声明的方法,挂接到Vue实例对象上: 实例方法可以直接通过实例对象调用,例如,对于上图中的vm实例: vm.handler(); //正确 实例方法另一个常见的用途,是将方法名声明为v-on指令的值,

vue学习二：用 Vue.js + Vue Router 创建单页应用的几个步骤

通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项目中创建如下对应的文件 ├── App.vue // APP入口文件 ├── api // 接口调用工具文件夹 │ └── index.js // 接口调用工具 ├── components // 组件文件夹,目前为空 ├── config // 项目配置文件夹 │ └── index.js // 项目配置文

学习如何写一个vue插件【入门篇】

#### 疑答 1.市面上已经有那么多插件可用,为什么还要造轮子?学习.借鉴思想.应用到开发 2.能否在项目中使用?与网上插件使用相同   更新维护问题怎么解决? 自身动力,使用者反馈等 #### 准备工具 1.官方文档https://cn.vuejs.org/v2/guide/plugins.html2.github.npm网站账号.node/npm.git3.代码工具:vscode #### 过程1.新建文件夹 vue-loading-text npm init 初始化 2.代码工具:vsc

Vue学习系列(一)——初识Vue.js核心

前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一处需要动态更新的DOM节点创建一个指令对象.每当一个指令对象观测的数据变化时,它便会对所绑定的目标节点执行相应的DOM操作.基于指令的数据绑定使得具体的DOM操作都被合理地封装在指令定义中,业务代码只需要涉及模板和对数据状态的操作即可,这使得应用的开发效率和可维护性都大大提升. 因此,数据绑定,组件

vue学习笔记第一天-vue.js简易留言板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable

Vue学习官网和Vue的书籍 目录结构

https://cn.vuejs.org/v2/guide/ https://router.vuejs.org/zh/guide/ 第1章 Vue.js简介1.1 Vue.js是什么 11.2 为什么要用Vue.js 21.3 Vue.js的Hello world 2 第2章 基础特性2.1 实例及选项 52.1.1 模板 62.1.2 数据 72.1.3 方法 92.1.4 生命周期 102.2 数据绑定 122.2.1 数据绑定语法 132.2.2 计算属性 172.2.3 表单控件 182

【Vue学习笔记】问题及解决方法记录

1.父组件传递 props 到子组件过程中,报错或者没有值. 参考链接:http://www.jb51.net/article/117447.htm 2.vue工程项目中style设置background-image路径问题: 使用 <li v-for="img in imgs" :key="img.id" class="" :style="'background-image:url('+ img +')'">&l