博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
VUE源码解析心得
阅读量:5102 次
发布时间:2019-06-13

本文共 1272 字,大约阅读时间需要 4 分钟。

解读vue源码比较好奇的几个点:

VUE MVVM 原理 http://www.cnblogs.com/guwei4037/p/5591183.html

 https://cn.vuejs.org/v2/guide/installation.html#对不同构建版本的解释

=======================华丽的分割线========================================================

Vue不同的构建版本

Vue生命周期实现
Vue数据普通对象监听(Dep,watcher,Observer关系)
Vue数组监听(重写_proto_)
Vue 包含一组观察数组的变异方法(重写)只能够监听几个方法?
Vue就地复用策略(出现错误)

=======================华丽的分割线========================================================

1. 官方图解如,beforeCreate -> 观察数据变化 + 事件初始化  -> created -> el template是否存在如何出发 compiler -> beforeMount -> mounted -> 如何更新 ->当$destroy被调用时 beforeDestroy ->  destroyed 

    

initMixin:  定义_init方法,在创建实例的时候调用  ;stateMinxin: 定义Vue类 $data $props $set $delete等属性;eventsMinxin: 定义Vue类的相关事件  $on $emit $off $once;   lifecycleMinxin:定义Vue类生命周期相关的属性;renderMixin: 定义Vue类_render属性,用于创建VNode结点

  

 _init方法:

 

initEvents: 初始化事件 可添加_parentListeners进行自定义事件监;callHook beforeCreate:生命周期  (问      题: 官网说是在beforeCreate进行的数据监听和  initEvent ?); initState: 数据监听callHook created:生命周期 ........(由此可看到vue生命周期是按照每个过程执行不同的内容)

2. 在initState方法中:

       

主要是利用的 Object.property方法;  数组监听原理: 重写__proto__方法;因此 vm.items[indexOfItem] = newValue    vm.items.length = newLength都不会       被监听到。  'push',pop','shift','unshift',  'splice','sort','reverse'   只会监控到这几种方式  

   网上的一张原理图很清晰的表明了整个过程

 

       

 

 

  

转载于:https://www.cnblogs.com/caihe/p/7275097.html

你可能感兴趣的文章
便签:
查看>>
JS function 函数基本定义方法
查看>>
Java再学习——关于ConcurrentHashMap
查看>>
bzoj3944 Sum
查看>>
后缀表达式/逆波兰表达式
查看>>
标准模板库中的优先队列(priority_queue)
查看>>
如何处理Win10电脑黑屏后出现代码0xc0000225的错误?
查看>>
局域网内手机访问电脑网站注意几点
查看>>
IT项目经验和难点分享
查看>>
那些黑刘翔的人,你们的良心被狗吃了
查看>>
图片延迟加载(lazyload)的实现原理
查看>>
TreeMap和TreeSet在排序时如何比较元素?Collections工具类中的sort()方法如何比较元素?...
查看>>
Redis系列--内存淘汰机制(含单机版内存优化建议)
查看>>
最小二乘法
查看>>
iptables端口转发
查看>>
金融三问
查看>>
HTML5新API记录
查看>>
Android 8 AudioPolicy 分析
查看>>
map.entry<k,v>小用法(转)
查看>>
mysql自增字段重排 或 归零
查看>>