【js】 vue 2.5.1 源码学习（一） 大体结构 （自写版本，非源码）
一、整体思路
1. 首先我们需要解析data，并且data里面的属性添加为vue的属性，并且拿到属性值 。 通过 原型方法 _peoxy实现 Obsever(代理函数) ==》 walk convert defineReactive
2. 对象属性的默认值 defineProperty
3. vue.init ==> $mount ==> compile
// 大概思路 1. 将data的值设置为Vue的属性。 _peoxy Obsever(代理函数) ==》 walk convert defineReactive
// 2. 对象属性的默认值 defineProperty
// 3. vue.init ==> $mount ==> compile (function(root, factory){
root.Vue = factory()
})(this,function(){
var noop = function(){ }
function compile(){ }
function defineProperty(obj , key ,val , def ){
// 判断是都又值，没有则选择默认值
if(val !== undefined){
obj[key] = val
}else{
obj[key] = def
}
}
function obsever(data){
// 数据变化的监听代理
if(!data || typeof data !=='object') return
return new Obsever(data)
}
function Obsever(data){
this.data = data
this.walk()
}
Obsever.prototype = {
walk:function(){
var obj = this.data
this.convert(obj)
},
convert: function(obj){
var _this = this
Object.keys(obj).forEach(function(key){
_this.defineReactive(obj,key,obj[key])
})
},
defineReactive: function(obj,key,val){
Object.defineProperty(obj,key,{
get: function(){
return val
},
set:function(newVal){
console.log('我能够监听到message他的变化')
val = newVal
}
})
}
}
function Vue(options){
this.$options = options || {}
var data = this._data = options.data
var _this = this
defineProperty(this , '$rander' , this.render , noop )
Object.keys(data).forEach(function(value){
// console.log('eee')
_this._proxy(value,data[value])
})
obsever(data)
this.init(options);
}
// 将data的属性设置到vue上
Vue.prototype._proxy= function(key,val){
var _this = this
Object.defineProperty(this,key,{
set: function(newVal){
console.log('newVal===' +newVal)
this._data[key] = newVal
},
get: function(){
return this._data[key]
}
})
}
// 初始化Vue
Vue.prototype.init = function(options){
var _this = this
var el = options.el
if(el!==undefined){
this.$mount(el) // 拿到template
}
}
Vue.prototype.$mount= function(el){
var template = this.template
this.$el = typeof el === 'string' ? document.querySelector(el) : document.body
if(this.$el == null){
error('Elenemt' + this.$options.el + 'none found')
}
defineProperty(this,'$template',template,this.$el.outerHTML)
if(this.$render === noop){
this.$render = Vue.compile(this.$template)
} }
Vue.compile = function(){
// 解析html。
}
return Vue
})
<body>
<div id="app">
{{ message }}
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> -->
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data: {
message: "hello Vue",
key: "wodow"
},
computed: {
add:function(){
// this.xxx
}
},
methods: { },
mounted: function(){ } })
vm.message = "hello yue" // vue 实例会代替data里面的值。
console.log( vm.message)
</script>
</body>
以上代码只是简单的叙述了一个大概开始，后续还有更多。
【js】 vue 2.5.1 源码学习（一） 大体结构 （自写版本，非源码）的更多相关文章
- 快速搞定用Vue+Webpack搭建前端项目（学习好久了，该写点东西了......）
现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...
- colly源码学习
colly源码学习 colly是一个golang写的网络爬虫.它使用起来非常顺手.看了一下它的源码,质量也是非常好的.本文就阅读一下它的源码. 使用示例 func main() { c := coll ...
- spring源码学习——spring整体架构和设计理念
Spring是在Rod Johnson的<Expert One-On-One J2EE Development and Design >的基础上衍生而来的.主要目的是通过使用基本的java ...
- SpringBoot源码学习系列之异常处理自动配置
SpringBoot源码学习系列之异常处理自动配置 1.源码学习 先给个SpringBoot中的异常例子,假如访问一个错误链接,让其返回404页面 在浏览器访问: 而在其它的客户端软件,比如postm ...
- Vue.js 源码学习笔记
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- Underscore.js 源码学习笔记（下）
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- Vue源码学习（一）：调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- Vue源码学习二 ———— Vue原型对象包装
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...
随机推荐
- pytest fixture 利用 params参数实现用例集合
@pytest.fixture有一个params参数,接受一个列表,列表中每个数据都可以作为用例的输入.也就说有多少数据,就会形成多少用例.如下面例子,就形成3条用例 test_parametrizi ...
- 【机器学习PAI实战】—— 玩转人工智能之综述
摘要: 基于人工智能火热的大背景下,通过阿里云的机器学习平台PAI在真实场景中的应用,详细阐述相关算法及使用方法,力求能够让读者读后能够马上动手利用PAI搭建属于自己的机器学习实用方案,真正利用PAI ...
- Deserializing/Serializing SOAP Messages in C#
/// <summary> /// Converts a SOAP string to an object /// </summary> /// <typep ...
- oracle-ORA-01567错误
删除日志4时将在线索1中保留少于两个日志文件
- Effective C++: 07模板与泛型编程
C++ template机制自身是一部完整的图灵机(Turing-complete):它可以被用来计算任何可计算的值.于是导出了模板元编程(TMP, template metaprogramming) ...
- Hdu 4493
题目链接 注意四舍五入,保留到小数点后两位(如果存在的话). 附上代码: /************************************************************** ...
- 写一个nginx监控日志
下面的代码是实现一个nginx监控日志功能,是不是很好玩呢.
- JAVA高级--java泛型
类型的参数化 泛型类可以同时设置多个参数 泛型类可以继承泛型类 泛型类可以实现泛型接口 示例--泛型类 package com.date; public class GenericDemo { pub ...
- 【JZOJ4878】【NOIP2016提高A组集训第10场11.8】时空传送
题目描述 经过旷久的战争,ZMiG和707逐渐培养出了深厚的感♂情.他们逃到了另一块大陆上,决定远离世间的纷争,幸福地生活在一起.钟情707的neither_nor决心要把他们拆散,他要动用手中最大杀 ...
- C++运行时类型识别
通过运行时类型识别(RTTI),程序能够使用基类的指针或引用来检索这些指针或引用所指对象的实际派生类型. 通过下面两个操作符提供 RTTI: 1. typeid 操作符,返回指针或引用所指对象的实际类 ...