一、手写类Vue框架：zue

class Zue{constructor(options){//构造函数：this永远指向实例}
}

1、在zue实例下创建$el，并指向挂载点

this.$el = document.querySelector(options.el);

2、在zue实例下创建$options，指向zue实例时的选项

this.$options = options || {};

3、在zue实例下创建$data，指向Vue实例的数据区内容

this.$data = options.data || {};

4、将data数据区中的所有变量变为具有访问器特性的变量

class Zue{constructor(options){this.$options = options || {};this.$el = document.querySelector(options.el);this.$data = options.data || {};this.proxyData(this.$data);    //this.$data或options.data}proxyData(data){//代理数据：将data数据区中的变量变为访问器特性的数据//将数据都注入到实例中Object.keys(data).forEach(key=>{Object.defineProperty(this,key,{enumberable:true,configurable:true,get:function(){return data[key];},set:function(newValue){if(data[key] === newValue) return;data[key] = newValue;}})})}
}var zm = new Zue({el:'#app',data:{cont:100,isOk:true,message:'zanilia'}
})

二、将注入到实例下$data中的数据编程具备访问器特性的数据（如上图所示）：

Vue实例中从数据区data中得到的$data中的变量也是具备访问器特性的变量。
为了完成这个功能，需要创建一个新类：Observer

//完善上面第四步的代码class Zue{constructor(options){this.$options = options || {};this.$el = document.querySelector(options.el);this.$data = options.data || {};this.proxyData(this.$data);    //this.$data或options.data//创建Observer类的实例new Observer(this.$data)}proxyData(data){//代理数据：将data数据区中的变量变为访问器特性的数据//           将data注入到实例中console.log(Object.keys(data))Object.keys(data).forEach(key=>{Object.defineProperty(this,key,{enumberable:true,configurable:true,get:function(){return data[key];},set:function(newValue){if(data[key] === newValue) return;data[key] = newValue;}})})}
}//Observer类：将注入到实例下$data中的数据变为具有访问器特性的数据
class Observer{constructor(data){   //data:接收Zue构造函数中的this.$datathis.walk(data)}//遍历data中的数据//Object.keys(data).forEach(...)walk(data){if(typeof data !== 'object'){//如果要遍历的数据不是对象则直接return返回，不执行后面的代码return;}Object.keys(data).forEach(key=>{this.defineReactive(data,key,data[key])})}//将walk()方法遍历出来的数据变访问造器数据//Object.defineProperty(...)defineReactive(obj,key,val){let _this = this;this.walk(val);Object.defineProperty(obj,key,{enumberable:true,   //可枚举性，configurable:true,    //可遍历性，get(){return val},set(newValue){if(val === newValue) return;val = newValue;_this.walk(newValue);}})}
}var zm = new Zue({//创建Zue实例时{}内容将传递给构造函数的options属性el:'#app',//创建Zue实例时的原始数据区data:{cont:100,isOk:true,message:'zanilia',obj:{a:10,b:20,c:30}}
})

认识Vue源码（2）-- 手写类Vue框架：Zue相关推荐

Vue 源码之手写Vue Router
Vue 源码之手写Vue Router 源码地址:https://github.com/CONOR007/Handwritten-routing 一.Vue Router的两种模式 hash模式实现原 ...
Vue源码分析-手写Vue（简易版）
1.Vue双向绑定/MVVM响应式原理/v-model的原理 vue.js通过数据劫持结合发布订阅者模式,通过Object.defineProperty来劫持各个属性的setter,getter,在数 ...
VUE源码解析-1- 初始篇：vue定义路径查找
从这里开始,记录VUE源码分析. 1. 将 vue 源码拉到本地,方便分析 vue 源码地址来自全球最大同性交流网站-- gitHub:https://github.com/vuejs/vue 我们 ...
「Vue源码学习」常见的 Vue 源码面试题，看完可以说 “精通Vue” 了吗？
Vue源码面试题一.行时(Runtime)+ 编译器(Compiler) vs. 只包含运行时(Runtime-only) webpack Rollup Browserify 二.Vue 的初始化过 ...
vue源码解析（3）—— Vue.js 源码构建
Vue.js 源码构建 Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下. 构建脚本通常一个基于 NPM 托管的项目都会有一个 package.json ...
源码分析 | 手写mybait-spring核心功能(干货好文一次学会工厂bean、类代理、bean注册的使用)
小傅哥 | https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获.专注于原创专题案例编写,目前已完成的专题有:Netty4.x实战专题案例.用Java实现JVM.基于Ja ...
面试必会之ArrayList源码分析手写ArrayList
作者:Java知音-微笑面对生活简介 ArrayList是我们开发中非常常用的数据存储容器之一,其底层是数组实现的,我们可以在集合中存储任意类型的数据,ArrayList是线程不安全的,非常适合用于 ...
百度、阿里、滴滴、新浪的面试心经总结，源码+原理+手写框架
前言作为一个程序员,如果你在新知识.新技术面前仍一无所知,依然吃着十多年前的老本,那你在知识技术上肯定落伍,如果又未能进入管理层面,那你肯定就会被长江的后浪拍在沙滩上了. 而不少与时俱进.善于学习的 ...
这份1307页Android面试全套真题解析，源码+原理+手写框架
前言前不久,几个朋友聚会,谈到了现在的后辈,我就说起了那个大三就已经拿到网易offer的小学弟. 这个学弟是00后,专升本进入我们学校的.进来后就非常努力,每次上课都是第一个到教室的,每次都是坐第一 ...

认识Vue源码（2）-- 手写类Vue框架：Zue

一、手写类Vue框架：zue

1、在zue实例下创建$el，并指向挂载点

2、在zue实例下创建$options，指向zue实例时的选项

3、在zue实例下创建$data，指向Vue实例的数据区内容

4、将data数据区中的所有变量变为具有访问器特性的变量

二、将注入到实例下$data中的数据编程具备访问器特性的数据（如上图所示）：

认识Vue源码（2）-- 手写类Vue框架：Zue相关推荐

最新文章

热门文章

认识Vue源码 （2）-- 手写类Vue框架：Zue

一、手写类Vue框架：zue

1、在zue实例下创建$el，并指向挂载点

2、在zue实例下创建$options，指向zue实例时的选项

3、在zue实例下创建$data，指向Vue实例的数据区内容

4、将data数据区中的所有变量变为具有访问器特性的变量

二、将注入到实例下$data中的数据编程具备访问器特性的数据（如上图所示）：

认识Vue源码 （2）-- 手写类Vue框架：Zue相关推荐

最新文章

热门文章

认识Vue源码（2）-- 手写类Vue框架：Zue

认识Vue源码（2）-- 手写类Vue框架：Zue相关推荐