Vue源码后记-其余内置指令（1）

Vue源码后记-其余内置指令（2）

-- 指令这个讲起来还有点复杂,先把html弄上来: <body> <div id='app'> <div v-if="vIfIter" v-bind:style="styleObject"> <input v-show="vShowIter" v-model='vModel' /> <span v-once>{{msg}}</span> <div v-html=&qu…

Vue源码后记-其余内置指令（1）

把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind:style="styleObject"> <input v-show="vShowIter" v-model='vModel' /> <span v-once>{{msg}}</span> <div v-html=&qu…

其实吧,写这些后记我才真正了解到vue源码的精髓,之前的跑源码跟闹着玩一样. go! 之前将AST转换成了render函数,跳出来后,由于仍是字符串,所以调用了makeFunction将其转换成了真正的函数: function compileToFunctions(template, options, vm) { // code... // compile var compiled = compile(template, options); // code... // 转换render res.…

Vue源码后记-更多options参数（1）

我是这样计划的,写完这个还写一篇数据变动时,VNode是如何更新的,顺便初探一下diff算法. 至于vue-router.vuex等插件源码,容我缓一波好吧,vue看的有点伤. 其实在之前讲其余内置指令有涉及到on事件绑定,这里再详细从头看一下事件绑定的正统流程吧! 上html代码: <body> <div id='app'> <div @click.self.number='click'> {{computedValue | filter}} </div>…

Vue源码后记-vFor列表渲染（1）

钩子函数比较简单,没有什么意思,这一节搞点大事情 => 源码中v-for的渲染过程. vue的内置指令包含了v-html.v-if.v-once.v-bind.v-on.v-show等,先从一个入手,其余的也就那么回事. 案例模板依照之前的,但是多加了一个v-for指令,如下所示: <body> <div id='app'> <a href="#" v-for="item in items">{{item}}</a&g…

Vue源码后记-钩子函数

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

Vue源码后记-vFor列表渲染（2）

这一节争取搞完! 回头来看看那个render代码,为了便于分析,做了更细致的注释: (function() { // 这里this指向vue对象下面的所有方法默认调用Vue$3.prototype上的方法 with(this){ return _c/*方法调用 => has拦截器过滤*/ ('div',{attrs:{"id":"app"}}, _l/*方法调用 => has拦截器过滤*/( (items/*_data属性访问 => 自定义pro…

Vue源码后记-更多options参数（2）

写起来感觉都是老三套,AST => render => VNode => patch 之前是把AST弄完了,对事件和过滤器处理如图: render函数也只看这两部分的转换吧! 首先是el.events,该属性在genData中被处理,这个在之前讲过了!不过,前面没有modifiers,所以,这里可以再看看: // name => click // handler => {value:'click',modifiers:{self:true,number:true}} func…

android studio应用修改到android源码中作为内置应用

1. 方法一:导入,编译(太麻烦,各种不兼容问题) android studio和eclipse的应用结构目录是不同的,但是在android源码中的应用基本上都是使用的eclipse目录结构(在/packages/apps中),如果是使用的eclipse,则随便复制一个android.mk修改一下就能使用了,如果是android studio,则还需要一定的修改. 注意:我只在android studio2.3上成功,android studio3.0上会有各种各样的错误,不知道如何解决 pac…

10.源码分析---SOFARPC内置链路追踪SOFATRACER是怎么做的？

SOFARPC源码解析系列: 1. 源码分析---SOFARPC可扩展的机制SPI 2. 源码分析---SOFARPC客户端服务引用 3. 源码分析---SOFARPC客户端服务调用 4. 源码分析---SOFARPC服务端暴露 5.源码分析---SOFARPC调用服务 6.源码分析---和dubbo相比SOFARPC是如何实现负载均衡的? 7.源码分析---SOFARPC是如何实现连接管理与心跳? 8.源码分析---从设计模式中看SOFARPC中的EventBus? 9.源码分析---SOFA…