vue 初始化方法_前端发展方向指南—Vue源码初始化
Vue 的源码结构比较绕,同时使用了大量的面向对象的高级技巧。重写方法,扩展方法,多态等应用。从 Vue 实例的加载过程就可以看出来,这一节重点看看 Vue 的源码加载流程是什么。
前言
vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章。在下借这个机会从大家的文章和讨论中汲取了一些营养,同时对一些阅读源码时的想法进行总结,出产一些文章,作为自己思考的总结。
前备知识
- Flow
- ES6语法
- 常用的设计模式
- 柯里化等函数式编程思想
一、vue简介和初始化过程
vue的源码结构如下:
A.compiler 编译用的
a.vue 使用字符串作为模板
b.在编译文件夹中存放对 模板字符串的 解析的算法, 抽象语法树, 优化等
B.core 核心, vue 构造函数, 以及生命周期等方法的部分
C.platforms 平台
a.针对运行的环境 ( 设备 ), 有不同的实现
b.也是 vue 的入口
D.server 服务端, 主要是将 vue 用在服务端的处理代码 ( 略 )
E.sfc, 单文件组件 ( 略 )
F.在编译文件夹中存放对 模板字符串的 解析的算法, 抽象语法树, 优化等shared 公共工具, 方法
二、Vue对象
在使用vue时我们知道都是使用new Vue(),来将vue的实例挂载到dom对象上从而运用数据驱动的方式来扩展我们的代码,我们首先来看一下Vue的定义
从源头上看来自core目录下的index.js文件
在js中一切皆函数,其实Vue就是一个函数,在初始化的时候执行原型链上的_init方法,vue没有把所有的方法都写在函数内部,这样从代码上来说,每次实例化的时候不会生成重复的代码。
主要还是代码结构更清晰,利用mixin的概念,把每个模块都抽离开,这样代码在结构和扩展性都有很大提高,这里的每个mixin先不说,先看以一下整体结构,这里定义完还要被core里的index.js再次包装调用initGlobalAPI(Vue)来初始化全局的api方法。
在web下runtime文件夹下引用再次封装,vue是分为运行时可编译和只运行的版本,所以如果需要编译,在Vue原型上添加了$mount方法。
三、运行机制
当我们在 main.js 里 new Vue( ) 后,Vue 会调用构造函数的 _init( ) 方法,这个方法是位于 core/instance/index.js 的 initMixin( ) 方法中定义的
我们可以看看 init( ) 这个方法到底进行了哪些初始化:
这里 _init() 方法中会对当前 vm 实例进行一系列初始化设置,比较重要的是初始化 State 的方法 initState(vm) 的时候进行 data/props 的响应式化,这就是传说中的通过 Object.defineProperty() 方法对需要响应式化的对象设置 getter/setter,以此为基础进行依赖搜集(Dependency Collection),达到数据变化驱动视图变化的目的。
最后检测 vm.$options 上面有没有 el 属性,如果有的话使用 vm.$mount 方法挂载 vm,形成数据层和视图层的联系。这也是如果没有提供 el 选项就需要自己手动 vm.$mount('#app') 的原因。
我们看到 created 钩子是在挂载 $mount 之前调用的,所以我们在 created 钩子触发之前是无法操作 DOM 的,这是因为还没有渲染到 DOM 上。
四、总结
一张图看一下整个流程
vue 初始化方法_前端发展方向指南—Vue源码初始化相关推荐
- vue computed使用_前端发展方向指南—Vue运行机制
点击上方蓝色字关注我们~01前言随着这几年前端的快速发展,页面中需要实现的功能越来越复杂,DOM操作频繁,使用传统的jQuery库去频繁操作DOM时不仅消耗性能,而且各种DOM绑定后期维护时简直是一场 ...
- threejs添加立方体_前端图形学(三十)——从源码去看threejs中的光照模型
欢迎来到[畅哥聊技术]前端图形学相关技术文章,更多精彩内容持续更新中,敬请关注. 上章节回顾 熟悉了threejs中内置的几何图形的渲染原理就是通过顶点渲染 传入自定义顶点渲染自定义的几何图形 本章目 ...
- 2021年web前端发展方向有哪些
一年转瞬即逝,仅仅一年的时间,就能发生很多事情,近几年web前端行业越来越受到大家的关注,很多人都想看看2021年web前端发展方向有哪些?下面来看看小编详细的介绍. 2021年web前端发展方向有哪 ...
- 我理解的前端发展方向
这是我个人的理解的前端2022年,甚至以后的前端发展的方向.这里没有太多的干货的知识,不会告诉你说Javascript怎么写,也不会告诉某个页面需要怎么排版--那都是一些很基础的东西(但是并不能我的本 ...
- Web前端发展方向有哪些?可以做什么岗位?
作为初级前端工程师要熟练掌握html,h5,jquery,css或css3,bootstrap,且能够快速的实现效果图布局和排版做一些前端交互:中高级前端应该了解和使用一个或多个css框架和js框架 ...
- 找到适合自己的前端发展方向
(个人唠叨:好想去BAT大公司上班,一则接触更多优秀的人,积累更多的专业技术,丰富自己的阅历,二则赚更多的money,找寻更多的成就感.但愿我在前端的道路上越走越远,在有了两年的技术沉淀后能够得偿所愿 ...
- vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿 关注我们,一起学习进步 基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
- python qt gui快速编程_《PYTHON QT GUI快速编程 PYQT编程指南》源码
文件名大小更新时间 <PYTHON QT GUI快速编程 PYQT编程指南>源码\chap01\answers.txt9882007-06-27 <PYTHON QT GUI快速编程 ...
- java计算机毕业设计高考报考指南网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计高考报考指南网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计高考报考指南网站源码+mysql数据库+系统+lw文档+部署 本源码技术栈: 项目架构:B/S ...
最新文章
- js 去掉地址栏内参数_JS获取网站地址栏URL中的参数值并转换成json对象
- bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
- apache 下实现防盗链
- 机架式服务器怎么和显示屏连接,图解机架式服务器的机箱和电源
- Oracle的AWR报告分析
- 让开!!!谁也别拦着我封装React组件!
- php int 设置超时,php如何设置超时时间
- vscode svn插件使用_我最终还是选择了VS code!
- 解决spring的xml文件打开没有namespace等操作选项的问题
- Python如何连接Mysql及基本操作
- 下载python教程-零基础Python教程全集下载.pdf
- HTML5之全局属性 (声明:内容节选自《HTML 5从入门到精通》)
- linux下测试磁盘的读写IO速度(IO物理测速)
- 数控铣床法兰克系统代码完整版
- 上海一本计算机工程应用大学排名,2019上海软科世界一流学科排名计算机科学与工程专业排名密歇根州立大学排名第51-75...
- 免费老牌php空间,Alwaysdata.com老牌稳定法国PHP免费空间
- Python判断字符串中连续最长的递增英文字母串
- ctrl+enter键
- ubuntu16.04 caffe /usr/bin/ld : cannot find -lxxx (xxx代表不同的库名称)
- Tar打包 压缩与解压缩到指定目录的方法
热门文章
- Chrome浏览器里的-webkit-focus-ring-color
- Angular开发模式下的编译器和运行时的代码比较
- Groovy里使用Runnable实现多线程
- Scala里List(1,2,3)和(1,2,3)的区别
- NOTEPAD++几个有用的工具栏按钮
- Fiori Hash url的生成原理
- where is url parameter evaluated in UI5 core q.sap.getUriParameters
- how is SAP UI5 bindItems implemented
- WebClient UI view controller所有可用的属性列表
- Inbound process in CRM