记录下vue原理中的一些知识点

生命周期

生命周期，就是vue实例从创建到销毁的一个过程，主要分为创建、挂载、更新、销毁四个阶段!

大致流程就是：

• vue实例初始化

• 初始化响应式数据

• 获取模版节点

• 对模版进行编译

• 挂载模版替换$el元素

• 数据发生变化，找到属性Dep依赖中所存放的Watcher，通知并更新

• diff新旧虚拟dom比对，找到最小差异，重新渲染真实DOM

模版渲染原理

在vue中通常编写的模版，在运行时，会将模版编译为一个render函数，会将一些模版中特殊的语法进行转换，如指令，动态插值表达式等相关特属语法，转换为浏览器能够认识的语法!

<template>
  <!--app 静态节点 -->
  <div class="app">
     <!--动态节点{{}}-->
     <span class="name">{{ name }}</span>
     <span class="age">{{ age }}</span>
  </div>
</template>
<script>
  export default{
    name: "test",
    data(){
      return {
        name: "张三",
        age: 18
      }
    }
  }
</script>

模版编译过程:

响应式原理

vue中的响应式，就是数据与视图之间的一个绑定关系，当数据发生变化时，vue会通知视图进行更新，而视图中的响应式数据发生变化时，则会更新对应的数据!

MVVM模式

mvvm模式是一种规范，由mvc模式转换而来!

M(Model) 代表的数据层，响应式数据!

V(View)代表的是视图层!

VM(Vue) 代表的vue实例，主要负责数据层与视图层之间的响应式关系!

Vue2中的响应式

vue2中的的响应式，主要是通过defineProperty方法实现的，该方法用来定义对象属性描述的，可以控制属性一些操作行为(是否可枚举，是否可配置，是否可删除)等相关属性配置，其中还包含了两个方法，get 和 set 方法，当获取对象中对应的属性时，会触发getter操作，当对对象中的属性重新赋值时，会触发setter操作，通过这两个方法，可以有效的监听对象属性"获取"和"编辑"的监听!

响应式数据初始化

在初始化vue实例时，vue会对options中的数据进行响应式处理，通过Observer方法进行数据劫持，如果是对象或者是数组对象时，会通过迭代的方式调用 defineReactive 方法给每一个属性添加 getter 和 setter 方法，最后将数据代理到vue实例上!

class Vue{
  construcotr( options ){
    this.$options = options;
    this.$el = options.el;
    this.$data = options.data;
    // 数据劫持
    Observer( this.$data );
    // 将数据代理到vm实例上
    Proxy(this)
    // 模版编译
    complier(this, el); 
  }
}

Observer数据劫持

function observer( obj ){
   if( typeof data !== "Object" ){
        return
    }
    for(let key in data){
        defineReactive(data, key, data[key]);
    }
}

defineReactive 添加 get和 set

function defineReactive(target, key, value){
    Object.defineProperty(target, key, {
        get(){
            // 将watcher添加到dep中
            if(Dep.target){
                Dep.depend();
            }
            return value;
        },
        set( val ){
            if( value !== val ){
                value = val;
            }
            // 获取Dep依赖，调用watcher回调函数操作
            if(Dep.target){
                Dep.notify();
            }
        }
    })
}

Dep 是vue中的一个依赖对象，主要负责响应式数据依赖收集，当响应式属性值发生变化时，会通知更新操作!

响应式数据：data props computed watch 以及props！

依赖收集

依赖指的是响应式数据，比如template模版中动态绑定的属性，或者展示的一些属性，这些都是属于依赖部分， 而这些依赖属性都会绑定一个watcher类，这个watcher类，主要负责监听响应式依赖属性变化的后续更新操作!

<template>
  <div class="app">
     <!--属性依赖 name age -->
     <div>
      姓名:  {{ name }}
      年龄:  {{ age }}
      体重:  {{ weghit }}
    </div>
  </div>
</template>
<script>
    export default{
        data(){
            return {
                name: "张三", // key1 watcher1
                age: 18, // key2 watcher2
                weghit: 120 // key3 watcher3
            }
        }
    }
</script>

另外，Watcher对象由Dep依赖对象来进行管理，当数据发生变化时，会触发Dep操作，执行对应的Watcher回调函数!

Dep deps = [Watcher1, Watcher2]

Dep deps = [Watcher3]

代码实现

Watcher监听响应式数据

class Watcher{
    constructor( vm, key, update ){
        this.$vm = vm;
        this.key = key;
        this.updateFun = update;
        
        Dep.target = this; // 将watcher和依赖进行关联
        vm[key]; // 触发getter操作
        Dep.target = null;
    }
    
    updater(){
        this.updateFun.call(this, this.$vm[key])
    }
}

Dep依赖收集

class Dep{
    // target 就是每个属性所对应的Watcher对象
    static target = null;
    constructor(){
        this.deps = [];
    }
    // getter 触发时，如果target存在，将Watcher添加到Deps依赖中
    addDeps( dep ){
        this.deps.push(dep);
    }
    // setter 触发时，会执行Watcher中的更新操作
    notify(){
        this.deps.forEach(watcher => watcher.updater());
    }
}

defineReactive响应式函数

function defineReactive(target, key, value){
    const dep = new Dep();
    Object.defineProperty(target, key, {
        get(){
            // 将watcher添加到dep中
            if(Dep.target){
                dep.addDeps(Dep.target);
            }
            return value;
        },
        set( val ){
            if( value !== val ){
                value = val;
            }
            // 获取Dep依赖，调用watcher回调函数操作
            if(Dep.target){
                dep.notify();
            }
        }
    })
}

总结

父子组件生命周期执行顺序

在vue中，父组件和子组件生命周期之间的加载过程，主要是在父组件挂载(beforeMount)之前，会将子组件进行挂载!