您的浏览器不支持JavaScript或者JavaScript的运行被您禁止了。
Vue2.5.16源码解读二:从入口文件进行阅读
可以看到这里import Vue from './runtime/index' 引入了一个Vue ,然后定义了下Vue.prototype.$mount 和Vue.compile ,看Vue源码之前最好是先过一下Vue的官方文档,这里Vue.prototype.$mount 是一个关在Vue原型链上的属性,所以通过new Vue() 创建的Vue的实例都会继承这个$mount 方法,在看这个方法的作用之前,因为看过了官方文档,并且我之前用了两年的Vue了,所以先猜测下这个大概跟Vue组件生命周期里的mounted 钩子可能有关系,可能是这个$mount 方法执行完后就会触发组件生命周期里的mounted 这个钩子里写的程序。
暂无评论
Vue2.5.16源码解读一:确定阅读入口
准备粗略地阅读下Vue,跟网上别人家的源码解读文章不同的是,这个系列是完全以第一次去读代码的视角带大家一起去读的,而非看完源码后以上帝的总结视角来写的系列文章。要看我们就直接找比较新的版本看,fork vue代码到我们自己的仓库上,clone到本地后,执行git tag 发现最新的版本是2.5.16,所以在本地新开一个tag-v2.5.16分支方便阅读以及后续commit(如果要commit的话):...
暂无评论
VueJS项目调试(debug)
启动服务后刷新页面(刷新前先把浏览器开发者工具打开),可以看到在程序进入App.vue组件mounted这个组件生命周期钩子里后,指定到debugger处时程序就被debug了。如下图所示,剩下的大家应该都很熟悉了。可以看到,此处显示的代码就是我们组件里的实际代码,并非被我们编译混淆后的那种代码,可读性非常好。
暂无评论
Vuex Data Persistence数据持久化
In one of my frontend project using VueJS, there is a need to maintain run-time data in javascript to local hardware so that these data will not be lost in case of a page refreshing. This requirement can be saying in another way - data persistence is required. Since the diversity of frontend environment, there are many stuff can be employed to save your run-time data. For example, if you use react-native, you can use one of React Native's API called AsyncStorage; if you are written html webpage, the Html api sessionStorage, localStorage and cookie can all be employed. And today we are going to employ localStorage, we're going to talk about data persistence in webpage developed using VueJS.
VueJS项目实践总结
说起来,从最初用客户端vue.js,到后面用vue-cli使用的Vue1 + webpack模版,再到后面使用Vue2+webpack,用这个框架做SPA应用也有一年半的时间了。做一些总结吧,想到哪里写哪里(针对Vue2 + webpack)。 一、页面按需加载 这主要是为了加快首屏加载速度。这样做的好处是第一屏所需加载的文件大小变小了,代价是如果用户会走完整个SPA的话,实际的总代码下载量是变多了的。按需加载页面主要就是修改/src/router/index.js文件,示例代码如下:
Vue-Router 2: Uncaught RangeError: Maximum call stack size exceeded
I was quickly establishing the basic structure of my new project at that time, and so there were many details I ignored. When I found the above error information, I was shocked. WTF is it? After some attempts, I found the problem is that there were some Vuejs component named "RouterView" which has <router-view></router-view> inside them, and that was the cause. After I renamed their router component to names other than "RouterView", the above error information disappeared.
暂无评论
1