![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Jacano
这个作者很懒,什么都没留下…
展开
-
【Vue】Vue-Router源码分析
入口万变不离其宗,看源码先找入口,首先看vue-router的入口,定义在src/index中。vue-router是基于类(class)实现。类中提供了构造方法和一些其他方法,类定义完后给类添加了install方法。vue-router其实是一个vue插件,使用vue-router需要Vue.use(vue-router)。Vue.use原理可看另一篇文章,总结一句话就是:Vue会调用...原创 2020-01-16 16:09:11 · 761 阅读 · 0 评论 -
【Vue】理解Vue源码系列(九)
我们知道了组件配置的合并流程,我们再来看看组件注册的过程,组件注册分为全局注册和局部注册,首先我们来看组件的全局注册。全局注册的代码定义在vue/src/core/global-api/assets.js中。import { ASSET_TYPES } from 'shared/constants'import { isPlainObject, validateComponentName }...原创 2019-07-20 22:26:36 · 156 阅读 · 0 评论 -
【Vue】理解Vue源码系列(七)
通过createComponent我们得到了组件vnode,接着会执行_update函数,_update的核心又是通过执行patch来完成的,patch是通过createElm来实现的,我们来看其中的逻辑。function createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArra...原创 2019-07-07 22:23:44 · 165 阅读 · 0 评论 -
【Vue】理解Vue源码系列(六)
在createComponent中,我们了解了组件构造器的初始化,接下来我们看看组件生命周期的安装。export function createComponent ( ... // install component management hooks onto the placeholder node installComponentHooks(data) ...}funct...原创 2019-07-07 20:52:47 · 180 阅读 · 0 评论 -
【Vue】理解Vue源码系列(五)
我们了解了Vue首次加载过程,之前的分析是建立在有template的基础上的,例如var app = new Vue({ template:"<div>hello</div>", el: '#app',})但更多情况我们是传入一个组件来完成Vue的初始化,例如var demo = { name: 'demo', template: ...原创 2019-07-06 22:44:54 · 1272 阅读 · 0 评论 -
【Vue】理解Vue源码系列(四)
_render方法定义在vue/src/core/instance/render.jsVue.prototype._render = function (): VNode { const vm: Component = this const { render, _parentVnode } = vm.$options if (_parentVnode) { ...原创 2019-07-06 16:54:19 · 146 阅读 · 0 评论 -
【Vue】vue-cli源码分析
vue-cli源码版本为3.1.3原创 2020-01-02 14:41:40 · 1813 阅读 · 1 评论 -
【Webpack】从零构建Vue项目配置
从零开始构建基于webpack4.0的Vue项目脚手架原创 2019-10-22 14:55:21 · 419 阅读 · 0 评论 -
【Vue】前端规范及工程化
1.前端规范1.1工作流规范1.1.1 版本号规范主版本号:当你做了不兼容的 API 修改,次版本号:当你做了向下兼容的功能性新增,修订号:当你做了向下兼容的问题修正。1.1.2 版本控制规范参考git flow协作流程,以功能为主要自下而上的开发流程规范。master(production分支): 只合并其他分支,不能在此分支上开发修改代码,此分支是发布到最近的生产环境中的...原创 2019-10-12 08:52:01 · 995 阅读 · 0 评论 -
【Vue】理解Vue源码系列(八)
123原创 2019-07-20 21:30:37 · 175 阅读 · 0 评论 -
【Vue】理解Vue源码系列(三)
当Vue执行完_init方法后,会调用$mount方法,这个方法在入口已经定义好了,我们先来看带有编译功能的$mount方法。目录在vue/src/platporms/web/entry-runtime-with-compiler.js。const mount = Vue.prototype.$mountVue.prototype.$mount = function ( el?: stri...原创 2019-06-30 16:28:48 · 105 阅读 · 0 评论 -
【Vue】理解Vue源码系列(二)
Runtime + Compiler我们来看带有编译功能的Vue版本,vue/src/platforms/web/entry-runtime-with-compiler.js。import config from 'core/config'import { warn, cached } from 'core/util/index'import { mark, measure } from ...原创 2019-06-29 10:39:08 · 161 阅读 · 0 评论 -
【Vue】Vue组件之间的通信
1.父组件向子组件传值父组件向子组件传值,我们要在子组件中设置好接收的值是怎么样的。假如有一个my-component的组件,我们可以在子组件中添加props属性,可以写成数组的形式,一般我们写成对象的形式,这样可以做类型检查和其他配置,例如:props: { multiple: { type: Boolean, default: false }, ...原创 2019-03-11 11:24:10 · 135 阅读 · 0 评论 -
【Vue】keep-alive
keep-alive是Vue提供给我们使用的高阶组件。我们可以使用keep-alive缓存需要缓存的组件,进而节省性能。当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。被keep-alive包裹的内容会被缓存,当然我们并不是所有的页面都要缓存,Vue提供了include、exclude两个属性给我们有条件的缓存。<ke...原创 2019-03-11 16:15:43 · 521 阅读 · 0 评论 -
【Vue】Vue.use(plugin)
开发中我们常常用Vue.use(Router)、Vue.use(iView)等等,use方法做了什么呢?我们上源码import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { co...原创 2019-03-11 17:25:25 · 2395 阅读 · 0 评论 -
【Vue】is特性
1.限制元素Vue模板就是dom模板,而dom对一些html元素是有限制的,比如<table> <my-component></my-component></table>这样是不行的通过is我们可以拓展html元素,比如<ul> <li is="my-component"></li&原创 2019-03-11 22:09:10 · 454 阅读 · 0 评论 -
【Vue】Vue生命周期
先来一张官网生命周期图我们在用代码来测试vue中的声明周期 mounted(){ console.log('-----mounted-----'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, beforeMount(){ con...原创 2019-03-12 09:17:52 · 896 阅读 · 0 评论 -
【Vue】简述Vue中双向绑定原理
双向绑定是数据变化更新到视图,视图上数据的变化更新到数据层。Vue的双向绑定实现主要依赖于三个方面:数据监听(observer)指令解析(compile)观察订阅(watcher)数据监听通过Object.defineProperty()方法劫持数据data中的变化,每当有数据变化,它就会通知watcher指令解析将v-on、v-bind指令进行解析整理,绑定相应的数据。观察者是...原创 2019-03-12 22:48:14 · 843 阅读 · 0 评论 -
【Vue】vue-router中的history和hash
vue-router提供了两个url模式,一种是hash,另一种是HTML5新增的history,在vue-router中可以通过mode: "history"或者mode: "hash"设置,默认为hash模式。1.history请求的url中不会有#利用了HTML5 History Interface新增的pushState() 和 replaceState() 方法前端url需要与...原创 2019-03-13 17:16:43 · 182 阅读 · 0 评论 -
Vue 仿大众点评项目
项目地址vue-dianping 仿大众点评Vue项目技术栈:VueVuexVue-RouterVue-CliExpressSequelizePostgreSql实现功能:登录注册发布点评点赞评论上传文件下载并安装模块git clone https://github.com/Jcanno/Vue-DianPing.gitcd Vue-DianPingnp...原创 2019-04-15 21:45:33 · 1440 阅读 · 1 评论 -
【Vue】理解Vue源码系列(一)
深入理解Vue源码,才是真正的使用Vue。我们可能用Vue开发了很多项目,但并不知道Vue框架中的原理,这样我们只会是一个Api调用师。理解一些框架的源码,帮助我们去设计、开发出更高质量的代码,这是一个真正工程师的必要技能。接下来,我们开启Vue源码探究之旅。本次Vue源码系列的Vue版本为2.6.10,所有的讨论都是围绕着这个版本的Vue展开的。我们先来看Vue源码目录,Vue源码都在src...原创 2019-06-28 09:10:21 · 379 阅读 · 0 评论 -
【Vue】Vue组件简单使用
现在的有些web应用都非常庞大,web开发也越来越组件化、模块化,我们需要在使用vue的时候去写一些组件,避免重复造轮子,提高组件的复用和开发效率。1.什么是组件?一个组件就好像一块积木,多个组件的层层堆叠、摆放最终形成一个完整的系统。组件的好处在于降低了各个模块之间的耦合性,以至于我们在维护项目时不会太心累。高度耦合的项目必然会带来维护时间上的浪费。在目前的前端开发中,组件化发开是必须要掌握...原创 2019-03-11 10:35:02 · 270 阅读 · 0 评论