vue2源码-响应式处理（学习笔记）-2

回顾vue的使用

index.html文件

  <div id="app">{{name}}</div><!-- 对数据进行渲染 -->
  <script src="./dist/vue.js"></script>  <!-- 引入vue（自己准备手写的） -->
  <script>
    //viewModel 数据模型
    //典型的MVVM View  vm  model
    let vm = new Vue({//vue的使用首先要挂载
      //定义数据的两种写法
      /*  data: {
         name: 'zs'
       } */
      data() {
        return {
          name: 'yft',
          age: {
            n: 1,
            m: 2
          }
        }
      }
    })
    vm._data.age = {
      v: 5
    }
    console.log(vm);
  </script>

一下是手写vue的js逻辑代码文件层层下去一个个建就好了

index.js

import { initMixin } from "./init"
function Vue(options){
    //options 为用户传入的选项
    this._init(options);//初始化操作
    
}
//扩展原型
initMixin(Vue)
export default Vue;

init.js

import { initSate } from "./state"
export function initMixin(Vue){
    const vm = this;
    vm.$options = options;
    //对数据进行初始化 
    initState(vm);//vm.$options.data  
}

state.js

import { observe } from "./observer/inex";
import { isFunction } from "./utils";//存放一下工具和方法
export function initSate(vm){
     const opts = vm.$options;
     if(opts.data){
          initData(vm);
     }
}
function initData(vm){
     let data = vm.$options.data;
     //vue2中会将data中的数据 进行劫持 Object.defineProperty
     //这是vm和data没有任何关系 通过_data进行关联
     data = vm._data = isFunction(data) ? data.call(vm) : data;
     observe(data)
}

utils.js

export function isFunction (val){
     return typeof val === 'function';
}
export function isObject (val){
     return typeof val == 'object' && val !== null;//下面会使用到
}

observer/index.js

import { isObject } from "../utils";
// 检测数据变化 类有类型
class Observer{
    construtor(data){//对象中的所有属性进行劫持
      this.walk(data);
    }
    walk(data){
      Object.keys(data).forEach(key=>{
          defineReactive(data,key,data[key]);
      })
    }
}

//vue2会对对象进行遍历 将每个属性用defineProperty 重新定义 性能差
function defineReactive(data,key,value){//value 有可能是对象
    observe(value);//本身用户默认就是对象套对象 需要进行递归处理 性能差
    Object.defineProperty(data,key,{
      get(){
          return value;
      },
      set(newV){
          observe(newV);
           value = newV;//如果用户赋值一个对象，需要将这个对象进行劫持
      }
    })
}
export function observe(data){
     //如果是对象才观测
     if(!isObject(data)){
       return ;
     }
     //默认最外层的data必须是一个对象
     return new Observer(data)
}

以上的基本的响应式处理内容，下面我继续学习继续更新哦！