初始化 
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. [BZO3572][HNOI2014]世界树：虚树+倍增

    分析 思维难度几乎为\(0\)的虚树码农(并不)题. 代码 #include <bits/stdc++.h> #define rin(i,a,b) for(register int i=( ...

  2. [LeetCode]-010-Regular_Expression_Matching

    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...

  3. @清晰掉 spi协议及工作原理分析

    说明.文章摘自:SPI协议及其工作原理浅析 http://bbs.chinaunix.net/thread-1916003-1-1.html 一.概述. SPI, Serial Perripheral ...

  4. leetcode 134 加油站问题

    leetcode 134 解析 在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 co ...

  5. 六：flask-自定义URL转换器

    flask进行url参数匹配的时候,是继承的werkzeug.routing.BaseConverter库进行重写的 导入看源码 里面有所有的URL参数数据类型的判断 也就是说,可以继承过后实现自己的 ...

  6. HTTP学习记录：四、头信息（请求和响应）

    学习资源主要为:@小坦克HTTP相关博客 一.请求头信息(Request Header) 请求头信息包含比较多,如下: 1.Cache头域 if-modified-Since 作用:把浏览器端缓存页面 ...

  7. IIS Express 使用方法

    配置文件位置: "%userprofile%\My Documents\IISExpress\config\applicationhost.config" 站点配置节: <s ...

  8. C#采集：图灵机器人信息

    Dictionary<string, string> users = new Dictionary<string, string>(); users.Add("use ...

  9. 【HBase】五、HBase的Java接口

      HBase是Hadoop中的一个重要组件,自然也是基于Java语言开发的,因此HBase有很好的Java接口供程序员调用,通过一个例子来演示java如何使用HBase数据库.   要想在HBase ...

  10. linux/linux学习笔记-常用命令(mooc)

    一.命令基本格式及文件处理命令 1.linux命令格式 简化选项用-表示,完整选项用--表示 注:linux通过权限位第1位(-:文件 / d:目录 / l:链接文件 来区分文件类型) 2.linux ...