【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 ...
随机推荐
- 给大家分享一张CSS选择器优选级图谱 ！
- 阿里云的重大战略调整，“被集成”成核心，发布SaaS加速器助力企业成长
摘要: 阿里云战略调整,“被集成”成为生态战略,讲讲即将“退居幕后”的阿里云. 阿里云近期调整动作巨大,阿里云新任总裁张剑锋(花名,行颠)上任后充分体现其创新和自我探索不断求“变”的阿里特性.期间,达 ...
- linux包之包管理rpm-yum
背景 YUM(Yellow dog Updater, Modified)为多个Linux发行版的前端软件包管理器,例如 Redhat RHEL, CentOS & Fedora. YUM通过调 ...
- poj 2385【动态规划】
poj 2385 Apple Catching Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14007 Accepte ...
- 使用哈工大LTP进行文本命名实体识别并保存到txt
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/broccoli2/article/det ...
- 编程算法 - 字符串的排列 代码(C)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u012515223/article/details/35593485 字符串的排列 代码(C) 本文 ...
- IO流实现文件及文件夹的复制
TestCopyDocuments.java package com.sxt.parc; /* * 复制文件夹 包含文本 视频 音频 用字节流 */ import java.io.BufferedIn ...
- Android 整合实现简单易用、功能强大的RecyclerView
之前总是会有人在一些开发群里问,有木有比较好使且功能强大些的RecyclerVew,比如支持下来刷新,加载更多等,还有人在问,如何为RecyclerView添加分割线,尤其是如何为网格布局添加分割线? ...
- Git 进阶：10大技巧让你迅速提升
1.Git自动补全 假使你使用命令行工具运行Git命令,那么每次手动输入各种命令是一件很令人厌烦的事情. 命令: cd ~ curl https://raw.github.com/git/git/ma ...
- LocalDate、LocalDateTime与timestamp、Date的转换
LocalDate.LocalDateTime与timestamp.Date的转换 1.LocalDate转Date LocalDate nowLocalDate = LocalDate.now(); ...