【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 ...
随机推荐
- VC程序异常中断的原因
自己编写的VC程序,编译调试通过,运行良好,然后关闭运行界面,就弹出一个“已经触发一个中断”的提示,然后断点就停在了下面这个中断处. _CRTIMP void _cdecl _CrtDbgBreak( ...
- 第一份Markdown。。。。。菜鸟给跪了
#First Markdown ##Hello World ###Ahaha - Python - Ruby - C++ - Haskell - C - Java 1. C 2. C++ 3. C# ...
- SpringMvc表单标签库
HTML密码框 <td><form:label path="password">密码:</form:label></td><t ...
- 遗传算法MATLAB实现(3):多元函数优化举例
多峰的Shubert为: 求f(x,y)在[-10,10]x[-10,10]上的最大值. MATLAB代码: fun_mutv函数为: function my=fun_mutv(x,y) t1=zer ...
- JasperStudio study..
https://blog.csdn.net/shiyun123zw/article/details/79166448
- Linux平时常用命令_查看进程_监控日志等命令
1.查进程 ps命令查找与进程相关的PID号: ps a 显示现行终端机下的所有程序,包括其他用户的程序. ps -A 显示所有程序. ps c 列出程序时,显示每个程序真正 ...
- iOS 微信支付如果遇到跳转只有一个确定请看这里
http://www.cocoachina.com/bbs/read.php?tid-321546.html 今天在联调微信支付,不得不说,和它比起来,阿里的支付sdk真的是太好用了.果然和后端同学在 ...
- 【Leetcode栈】有效的括号（20）
题目 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 1,左括号必须用相同类型的右括号闭合. 2,左括号必须以正确的顺序闭合. 注意 ...
- Kubernetes1.3新特性：rktnetes
(一) 背景资料 对于Kubernetes来说,从架构设计上就是支持Docker和CoreOS rkt两种容器的,在1.2版本中,最低支持CoreOS rkt 0.13.0版本,这个rkt版本算是一 ...
- Linux下配置 Keepalived（心跳检测部署）
首先呢,我想先给大家简单介绍一下什么是keepalived: Keepalived的作用是检测服务器的状态,如果有一台web服务器死机,或工作出现故障,Keepalived将检测到,并将有故障的服务器 ...