初始化 
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. [CSP-S模拟测试]:bird（线段树优化DP）

    题目传送门(内部题89) 输入格式 第一行两个数$n$和$k$,分别表示小鸟的只数和$R$装弹时间.接下来$n$行,每行两个数$l,r$表示$n$只小鸟初始时的头和尾的$x$坐标. 输出格式 输出一个 ...

  2. 解析JSON有俩种方式：JSONObject和GSON

    JSONObject: //JSONObject解析JSON文件 private void parseJSONWithJSONObject(String json_data) { try { JSON ...

  3. java分页原理及分类

    1.使用List接口最终subList()方法实现分页 2.直接使用数据库SQL语句实现分页 3.使用hibernate等框架实现跨数据库的分页 mybatis是面向SQL的,本质上和第二种分页方式相 ...

  4. legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解（Vagrant + Homestead）

    legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead) 一.总结 一句话总结: 1.安装的话就是下载好git,va ...

  5. Python For Mac 开发环境安装 以及问题记录

    Python For Mac 开发环境安装记录 把自己安装的过程记录一下,亲测可用 1.Python3环境安装(转载http://www.cnblogs.com/meng1314-shuai/p/90 ...

  6. VC CString,int,string,char*之间的转换

    CString转string : CString strMfc = "test"; std::string strStr; strStr = strMfc.GetBuffer(); ...

  7. Factory Kit【其他模式】

    Factory Kit public class FactoryKit { /** * Factory Kit:它定义了一个包含不可变内容的工厂,并使用独立的构建器和工厂接口来处理对象的创建. */ ...

  8. EDM邮件营销真的落伍了吗？

    很多朋友都觉得EDM邮件营销已经日暮西山了.难道EDM邮件营销真的落伍过时了吗?小编本文为大家讲解一下. 一.有数据为证:目前电子邮件仍然比较活跃,九成以上的用户每天至少查看一封邮件,并且6成以上的人 ...

  9. Vue知识整理10：条件渲染（v-if v-show）

    在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.

  10. spring几种获取 HttpServletRequest 对象的方式

    以下的 request 实例都编号了,一共 4 种 方式 1.@Autowired 方式2.public void Test(HttpServletRequest request1, HttpServ ...