草庐IT

fast-render

全部标签

Vue2模版编译(AST、Optimize 、Render)

在Vue$mount过程中,我们需要把模版编译成render函数,整体实现可以分为三部分:parse:解析模版template生成AST语法树optimize:优化AST语法树,标记静态节点codegen:把优化后的AST语法树转换生成render方法代码字符串,利用模板引擎生成可执行的render函数(render执行后返回的结果就是虚拟DOM,即以VNode节点作为基础的树)Vue.js提供了2个版本,一个是Runtime+Compiler的,一个是Runtimeonly的,前者是包含编译代码的,可以把编译过程放在运行时做,后者是不包含编译代码的,需要借助webpack的vue-loade

编写第一个GET、POST接口[renren-fast框架系列(1)]

配置好renren-fast脚手架,学习完SpringMVC架构后,我需要具体调试renren-fast的接口,比如要新增某个接口。什么是前后端分离运行renren-fast项目时,我们访问http://localhost:8080/renren-fast/的结果:可以看到,接口给出了相应的回应,状态码401Unauthorized代表客户端错误,指的是由于缺乏目标资源要求的身份验证凭证,发送的请求未得到满足。运行renren-fast-vue项目时,我们访问http://localhost:8001/#/login:接着使用Chrome自带的网络工具:点击Headers可以查看Request

编写第一个GET、POST接口[renren-fast框架系列(1)]

配置好renren-fast脚手架,学习完SpringMVC架构后,我需要具体调试renren-fast的接口,比如要新增某个接口。什么是前后端分离运行renren-fast项目时,我们访问http://localhost:8080/renren-fast/的结果:可以看到,接口给出了相应的回应,状态码401Unauthorized代表客户端错误,指的是由于缺乏目标资源要求的身份验证凭证,发送的请求未得到满足。运行renren-fast-vue项目时,我们访问http://localhost:8001/#/login:接着使用Chrome自带的网络工具:点击Headers可以查看Request

ArrayList源码深度剖析,从最基本的扩容原理,到魔幻的迭代器和fast-fail机制,你想要的这都有!!!

ArrayList源码深度剖析本篇文章主要跟大家分析一下ArrayList的源代码。阅读本文你首先得对ArrayList有一些基本的了解,至少使用过它。如果你对ArrayList的一些基本使用还不太熟悉或者在阅读本文的时候感觉有点困难,你可以先阅读这篇文章ArrayList设计与实现,自己动手写ArrayList。ArrayList继承体系分析RandomAccess,这个接口的含义表示可以随机访问ArrayList当中的数据,拿什么是随机访问呢?随机访问就是表示我们可以在常量时间复杂度内访问数据,也就是时间复杂度是O(1)。因为在ArrayList当中我们使用的最基本的数据类型是数组,而数组

ArrayList源码深度剖析,从最基本的扩容原理,到魔幻的迭代器和fast-fail机制,你想要的这都有!!!

ArrayList源码深度剖析本篇文章主要跟大家分析一下ArrayList的源代码。阅读本文你首先得对ArrayList有一些基本的了解,至少使用过它。如果你对ArrayList的一些基本使用还不太熟悉或者在阅读本文的时候感觉有点困难,你可以先阅读这篇文章ArrayList设计与实现,自己动手写ArrayList。ArrayList继承体系分析RandomAccess,这个接口的含义表示可以随机访问ArrayList当中的数据,拿什么是随机访问呢?随机访问就是表示我们可以在常量时间复杂度内访问数据,也就是时间复杂度是O(1)。因为在ArrayList当中我们使用的最基本的数据类型是数组,而数组

Vue 2.x源码学习:render方法、模板解析和依赖收集

内容乃本人学习Vue2源码的一点笔记,若有错误还望指正。源码版本:vue:2.6vue-loader:13.xvue-template-compiler:2.6之前的相关学习笔记:应用初始化大致流程数据响应式改造众所周知,Vue的脚手架项目是通过编写.vue文件来对应vue里组件,然后.vue文件是通过vue-loader来解析的,下面是我学习组件渲染过程和模板解析中的一些笔记。Vue实例挂载方法$mount一个普通vue应用的初始化:importVuefrom"vue";importAppfrom"./App.vue";Vue.config.productionTip=false;newVu

Vue 2.x源码学习:render方法、模板解析和依赖收集

内容乃本人学习Vue2源码的一点笔记,若有错误还望指正。源码版本:vue:2.6vue-loader:13.xvue-template-compiler:2.6之前的相关学习笔记:应用初始化大致流程数据响应式改造众所周知,Vue的脚手架项目是通过编写.vue文件来对应vue里组件,然后.vue文件是通过vue-loader来解析的,下面是我学习组件渲染过程和模板解析中的一些笔记。Vue实例挂载方法$mount一个普通vue应用的初始化:importVuefrom"vue";importAppfrom"./App.vue";Vue.config.productionTip=false;newVu

推荐一套轻量级的开源图床系统:Light Fast Picture

如果您跟我一样平时有些博客的习惯,那么图片存储是否有困扰过你呢?今天就给大家推荐一款不错的开源图床系统:LightFastPicture它是一个基于koa+vue3.x+typescript实现的图床工具。它可以帮助用户快速上传图片到云端,并返回图片链接,方便用户在网页、社交媒体等平台上分享图片。它的功能已经非常丰富,满足我们对图片管理的日常需求图片上传:支持图片多图上传、拖拽上传、粘贴上传、一键复制多种格式的图片外链。图片管理:多上传的图片进行管理,支持文件重命名、移入指定相册、删除图片、预览图片等。存储桶管理:支持多桶储存,可同时添加多个对象存储桶管理,上不封顶,例如:七牛云对象存储、阿里

推荐一套轻量级的开源图床系统:Light Fast Picture

如果您跟我一样平时有些博客的习惯,那么图片存储是否有困扰过你呢?今天就给大家推荐一款不错的开源图床系统:LightFastPicture它是一个基于koa+vue3.x+typescript实现的图床工具。它可以帮助用户快速上传图片到云端,并返回图片链接,方便用户在网页、社交媒体等平台上分享图片。它的功能已经非常丰富,满足我们对图片管理的日常需求图片上传:支持图片多图上传、拖拽上传、粘贴上传、一键复制多种格式的图片外链。图片管理:多上传的图片进行管理,支持文件重命名、移入指定相册、删除图片、预览图片等。存储桶管理:支持多桶储存,可同时添加多个对象存储桶管理,上不封顶,例如:七牛云对象存储、阿里

解决vue报错 Failed to mount component: template or render function not defined.

今天npmrundev的时候,有个页面报错,提示[Vuewarn]:Failedtomountcomponent:templateorrenderfunctionnotdefined.昨天还好好的,今天就报错了,也没改啥。经过查资料,反复查证回想改了什么,发现是因为昨天在在哪个页面组件目录(src\views\组件目录)里面新建了个index.js,so,现在这个组件目录下有一个index.vue和index.js,导致路由配置表里面引入组件的时候引入到了index.js没有引入到组件导致报错。路由表配置:component:()=>import('@/views/subfile/index'