初始化 
Data,props,event监听
beforCreated,Created
挂载
执行编译，首次渲染、创建和追加过程
编译
编译模块分为三个阶段:parse、optimize、generate
数据响应式
渲染函数执行时会触发getter进行依赖收集，将来数据变化时会触发setter进行更新
虚拟dom
Vue 工作机制
// dom
<div   style="color:red" @click="xx"><a> click me</a>
</div>
// vdom
{
tag: 'div',
props:{name:'开课吧',
        style:{color:red},
onClick:xx}
children: [
 {
    tag: 'a',
    text: 'click me'
}
 ]
}
更新视图
数据修改时监听器会执行更新，通过对比新旧vdom，得到最小修改，就是 patch
实现自己的Vue
简化版架构图
// 创建kvue.js// new KVue({// data: {
//
// }// })
class KVue {
  constructor(options) {
// 保存选项
this.$options = options;// 传入data选项
this.$data = options.data;// 响应化this.observe(this.$data);
}
  observe(value) {
    if (!value || typeof value !== "object") {
return;}
// 遍历，执行数据响应式Object.keys(value).forEach(key => { 
      this.defineReactive(value, key, value[key]);
    });
}
defineReactive(obj, key, val) {// 递归
this.observe(val);
// 给obj定义属性Object.defineProperty(obj, key, { 
get() {
        return val;
},
  set(newVal) {
        if (newVal === val) {
return;}
val = newVal;
console.log(`${key}属性更新了`);}
});}
}
// 创建index.html
<script src="kvue.js"></script><script>
      const app = new KVue({
        data: {
          test: "I am test",
          foo: {
bar: "bar"}
}});
      app.$data.test = "hello, kaikeba!";
      app.$data.foo.bar = "oh my bar";
</script>
为$data做代理, kvue.js
observe(value) {
  //...
Object.keys(value).forEach(key => {this.defineReactive(value, key, value[key]);// 代理data中的属性到vue根上this.proxyData(key);
});}
// 在vue根上定义属性代理data中的数据proxyData(key) { 
  Object.defineProperty(this, key, {
    get() {
      return this.$data[key];
    },
    set(newVal) {
      this.$data[key] = newVal;
}});
}
<script>
    app.test = "hello, kaikeba!";
    app.foo.bar = "oh my bar";
</script>
编译compile
class KVue {
    constructor(options) {
// ...
// 新建一个Watcher观察者对象，这时候Dep.target会指向这个Watcher对象new Watcher(this,'test');
// 访问get函数，为了触发依赖收集
this.test
       new Watcher(this,'foo.bar');
       this.foo.bar
    }
}
<body>
  <div id="app">
    <p>{{name}}</p>
    <p k-text="name"></p>
    <p>{{age}}</p>
    <p>
      {{doubleAge}}
</p>
<input type="text" k-model="name"><button @click="changeName">呵呵</button><div k-html="html"></div> 
  </div>
  <script src='./compile.js'></script>
  <script src='./kvue.js'></script>
<script>
const kaikeba = new KVue({
      el:'#app',
      data: {
name: "I am test.",
age:12,html:'<button>这是一个按钮</button>'
      },
      created(){
console.log('开始啦')setTimeout(()=>{
this.name='我是测试'}, 1500)
},methods:{
changeName(){
this.name = '哈喽，开课吧'this.age = 1
}}
})
  </script>
</body>

vue 源码分析的更多相关文章

  1. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  2. [Vue源码分析] v-model实现原理

    最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...

  3. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  4. Vue源码分析(一) : new Vue() 做了什么

    Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计 ...

  5. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  6. vue源码分析—Vue.js 源码目录设计

    Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...

  7. vue源码分析—Vue.js 源码构建

    Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.j ...

  8. vue源码分析—认识 Flow

    认识 Flow Flow 是 facebook 出品的 JavaScript 静态类型检查⼯具.Vue.js 的源码利⽤了 Flow 做了静态类型检查, 所以了解 Flow 有助于我们阅读源码 Flo ...

  9. Vue 源码分析—— 目录结构

    一,Vue.js 的源码都是在src 目录下,其目录结构如下. 1.compiler 目录包含Vue.js 所有编译相关的代码.它包括把所有模板解析成ast 语法树, ast 语法树优化等功能. 2. ...

  10. vue源码分析之new Vue过程

    实例化构造函数 从这里可以看出new Vue实际上是使vue构造函数实例化,然后调用_init方法 _init方法,该方法在 src/core/instance/init.js 中定义 Vue.pro ...

随机推荐

  1. cmake尝试检测GCC版本报错

    本人尝试编译指定commit版本的MRPT库,报错如下, CMake Error at cmakemodules/script_detect_gcc.cmake: (LIST): list GET g ...

  2. CUDA开发指南

    安装指南:https://blog.csdn.net/qilixuening/article/details/77503631 安装了anaconda不需要安装cuda和cudnn?:https:// ...

  3. BZOJ 1069 Luogu P4166 最大土地面积 (凸包)

    题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=1069 (luogu)https://www.luogu.org/probl ...

  4. i++ 是线程安全的吗

    相信很多中高级的 Java 面试者都遇到过这个问题,很多对这个不是很清楚的肯定是一脸蒙逼.内心肯定还在质疑,i++ 居然还有线程安全问题?只能说自己了解的不够多,自己的水平有限. 先来看下面的示例来验 ...

  5. 冲刺周日 Fighting SunDay

    一.SunDay照片 二.项目分工 三.今日份燃尽图 四.项目进展 码云团队协同环境构建完毕 利用Leangoo制作任务分工及生成燃尽图 完成AES加解密部分代码 用代码实现对文件的新建.移动.复制. ...

  6. CentOS 6.5系统使用yum方式安装LAMP环境和phpMyAdmin，mysql8.0.1/mysql5.7.22+centos7，windows mysql安装、配置

    介绍如何在CentOs6.2下面使用YUM配置安装LAMP环境,一些兄弟也很喜欢使用编译的安装方法,个人觉得如果不是对服务器做定制,用yum安装稳定简单,何必去download&make&am ...

  7. maven 安装jar包命令

    以 spring-context-support-3.1.0.RELEASE.jar 为例,在 @3图中已经给出这个 jar 包的 groupId,artifactId,version信息,手动安装的 ...

  8. 平时碰到系统CPU飙高和频繁GC，你会怎么排查？

    处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题.当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警.本文主要针对系统运行缓慢这 ...

  9. CentOS7 修改网卡名称为eth0 & 在VMWare中添加多网卡配置

    目录 目录 前言 在CentOS 7 中为什么这样命名网卡 在RHEL7中使用RHEL6的网卡命名规则 在VMWare中为CentOS7添加网卡设备 前言 无论是RHEL 7.还是CentOS 7都使 ...

  10. Delphi XE2 之 FireMonkey 入门(33) - 控件基础: TFmxObject: SaveToStream、LoadFromStream、SaveToBinStream、LoadFromBinStream

    Delphi XE2 之 FireMonkey 入门(33) - 控件基础: TFmxObject: SaveToStream.LoadFromStream.SaveToBinStream.LoadF ...