VUE源码解析心得

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

1.生命周期是如何实现的

2.如何时间数据监听,实现双向绑定的

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

1. 官方图解如https://cn.vuejs.org/v2/guide/instance.html#生命周期图示,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方法

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

时间: 2024-08-04 03:50:17

VUE源码解析心得的相关文章

Vue源码解析(二):数据驱动

一.数据驱动: 数据驱动是vue.js最大的特点.在vue.js中,数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom.数据驱动还有一部分是数据更新驱动视图变化.下面我们来分析vue.js中模板和数据如何渲染成最终的DOM的. 二.Vue初始化发生了什么: 当我们new Vue的时候,发生了什么? 在上一节中,我们分析了vue初始化的代码在'src/core/instance/index.js'中,可以看到,Vue实例里面调用了this._init方法 fu

读 vue 源码一 (为什么this.message能够访问data里面的message)

12月离职后,打算在年后再找工作了,最近陆陆续续的看了黄轶老师的vue源码解析,趁着还有几天过年时间记录一下. 目标:vue如何实现通过this.key,就能直接访问data,props,methods,里面的key. 源码:当我们在项目中new Vue实例后会执行Vue构造函数的_init方法,并执行一些混入 function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vu

vue系列---响应式原理实现及Observer源码解析(一)

_ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的增加或减少? 2.4 使用Proxy来实现数据监听 三. Observer源码解析 回到顶部 一. 什么是响应式? 我们可以这样理解,当一个数据状态发生改变的时候,那么与这个数据状态相关的事务也会发生改变.用我们的前端专业术语来讲,当我们JS中的对象数据发生改变的时候,与JS中对象数据相关联的DOM

深入vue - 源码目录及构建过程分析

 公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ?“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整体有一个认知,有助于后续对源码的阅读.” 一.目录结构 上图是对vue的代码的所有目录进行的梳理,其中源码位于src目录下,下面对src下的目录进行介绍. compiler 该目录是编译相关的代码,即将 template 模板转化成 render 函数的代码. vue 提供了 render 函数,r

vue源码解读(一)Observer/Dep/Watcher是如何实现数据绑定的

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了5篇啦~ https://github.com/yisha0307/... 快速跳转: Vue的双向绑定原理(已完成) 说说vue中的Virtual DOM(已完成) React diff和Vue diff实现差别 Vue中的异步更新策略(已完成) Vuex的实现理解 Typescript学习笔记(持续更新ing) Vue源码中闭包的使用(已完成) 介绍 最近在学习vue和vuex的源码,记录自己的一些学习心得.主要借鉴

vue源码解读预热-0

vueJS的源码解读 vue源码总共包含约一万行代码量(包括注释)特别感谢作者Evan You开放的源代码,访问地址为Github 代码整体介绍与函数介绍预览 代码模块分析 代码整体思路 总体的分析 从图片中可以看出的为采用IIFE(Immediately-Invoked Function Expression)立即执行的函数表达式的形式进行的代码的编写 常见的几种插件方式: (function(,){}(,))或(function(,){})(,)或!function(){}()等等,其中必有

commons-fileupload源码学习心得

commons-fileupload依赖于commons-io包. commons-fileupload的使用方法: 1.创建一个文件项目工厂类DiskFileItemFactory.       DiskFileItemFactory有俩个构造方法: 1 DiskFileItemFactory() 其中sizeThreshold是默认值10kB, 文件大小不超过这个值将内容保存在内存,超过这个值会把文件保存到临时目录下,可用System.getProperty("java.io.tmpdir&

Vue源码后记-钩子函数

vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过一下~ 想到什么写什么了,这节就简单说说钩子函数吧! vue中的钩子函数主要包含初始化的beforeCreated/created,Virtual Dom更新期间的beforeUpdate/updated,页面渲染期间的beforeMount/mounted,组件销毁期间的beforeDestroy

大白话Vue源码系列(01):万事开头难

阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的最对脾气的 MVVM 框架.之前也使用过 knockout,angular,react 这些框架,但都没有让咱产生 follow 的冲动.直到见到 Vue,简直是一见钟情啊. Vue 的官方文档已经对 Vue 如何使用提供了最好的教程,建议 Vue 新手直接去官网学习,而不要在网上找些质量参差不齐的