【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 ...
随机推荐
- 51nod1196 字符串的数量
用N个不同的字符(编号1 - N),组成一个字符串,有如下要求:(1) 对于编号为i的字符,如果2 * i > n,则该字符可以作为结尾字符.如果不作为结尾字符而是中间的字符,则该字符后面可以接 ...
- scala实现定时任务的方法
/** * ScheduledExecutorService是从Java SE5的java.util.concurrent里,做为并发工具类被引进的,这是最理想的定时任务实现方式. * 它有以下好处: ...
- oracle如何穿过防火墙连接数据库
这个问题只会在WIN平台出现,UNIX平台会自动解决. 解决方法: 在服务器端的SQLNET.ORA应类似 SQLNET.AUTHENTICATION_SERVICES= (NTS) NAMES.DI ...
- 【转载】获取更多/proc/fd中有关socket的信息
Q: Looking in /proc/$mypid/fd/, I see these files lrwx------ cm_user cm_user Oct : -> /dev/pts/ ( ...
- TIJ——Chapter Nine:Interfaces
A class containing abstract methods is called an abstract class. If a class Contains one of more abs ...
- python isinstance和issubclass,区分方法和函数,反射
一.isinstance和issubclass 1.isinstance class Animal: def eat(self): print('刚睡醒吃点儿东西') class Cat(Animal ...
- javascript实现html中关键字查询
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Istio on ACK集成生态(2): 扩展AlertManager集成钉钉助力可观测性监控能力
阿里云容器服务Kubernetes(简称ACK)支持一键部署Istio,可以参考文档在ACK上部署使用Isito.Istio on ACK提供了丰富的监控能力,为网格中的服务收集遥测数据,其中Mixe ...
- 关于react-router 路径改变页面没有刷新
routert.js 中: <Router> <Switch> <Route exact path="/" component={Login}> ...
- GPUtil是一个Python模块，使用nvidia-smi从NVIDA GPU获取GPU状态
GPUtil是一个Python模块,使用nvidia-smi从NVIDA GPU获取GPU状态 一个Python模块,用于在Python中使用nvidia-smi以编程方式从NVIDA GPU获取GP ...