u010651383的专栏

本人上一篇博文里分析了一下Vue中的模板编译器的原理及其实现方式（如果感兴趣可以去看一下：Vue源码学习之模板编译器原理），如果把Vue看成一辆跑车，模板编译器可以看做是跑车的底盘，那么优化器便可以看做是一种更为轻便的合金材料，跑车没有这种材料，依旧能够正常行驶，但如果将跑车的底盘换成这种材料，便可以使得整个车身更加轻盈，跑得更快。优化器起到的便是通过将生成的抽象语法树中的一些静态节点（所谓静态...

在Vue中，从模板到页面更新的流程大概是这样的：模板编译器将用户提供的一个模板字符串（或dom节点id）解析生成抽象语法树，再经由优化器优化，标记所有的静态节点后，交由代码生成器生成渲染代码，再通过渲染函数构建器将渲染代码构建成一个渲染函数，调用这个渲染函数，我们就可以得到目标模板的虚拟dom，经过patching算法的对比后，得到最少更改的虚拟dom，再根据这个虚拟dom实现页面的更新。万...

最近，Vue3成为前端领域热门研究和讨论的框架，尽管它还没有发布正式版，但这没办法阻止万能的前端程序员研究其新的实现模式与实现原理。这里附送一个Vue3(即Vue-next传送门)vue-next。我们可以看出，从Vue3开始，Vue将原本使用Flow进行类型校验全面该为采用TypeScript(TS)作为其开发语言，这将使Vue3更加的严谨并可避免很多因为js弱语言所带来的一些不可预料的问题...

当前，Vue和React已成为两大炙手可热的前端框架，这两个框架都算是业内一些最佳实践的集合体。其中，Vue最大的亮点和特色就是数据响应化，而React的特点则是单向数据流与jsx。笔者近期正在研究Vue源码，在此过程中尝试实现一个简易版的Vue，而实现Vue的第一步便是解决数据响应化的问题。以下便是对Vue响应化的简易版实现。数据响应的原理：1、依赖收集：data通过Observer...

大部分的Vue应用都采用spa模式开发，从而达到一次加载，全站使用的目的，可以极大地提高应用的用户体验。而spa应用的原理其实就是动态的把目标页面的代码替换到路由组件内，从而实现路由切换的目的。那么，问题来了，加入我有页面A、页面B两个页面，页面A中有一堆表单，用户填了一半，然后切换到B页面去看一个消息，看完想要回到页面A继续填写表单，如果不经任何处理的话，用户回到页面A的结果只有一个，自己辛辛苦...

之前在使用Vue做项目时，经常会用到Vue.use(plugins[,options])这种方式去将一个组件绑定到Vue的全局实例上，这样，我们就不需要在每个页面都引入和注册组件便可以直接使用了，例如：Vant组件的挂载：import Vue from "vue";import { Tabbar, TabbarItem, Toast, Icon, ...

在Vue中经常会遇到一些比较复杂的业务场景，需要组件之间隔代通信或者是兄弟组件之间相互通信，这种情况下，我们一般选用EventBus方式解决组件间的通信问题，具体实现如下：// utils/EventBus.jsimport Vue from 'vue';// 直接导出一个Vue实例，使用Vue示例的$emit、$on、$once、$off的功能进行组件间的通信，由于所有的组件都引入同一...

可选链操作符是一个新的js api，它允许读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。目前处于Stage 3提案阶段，暂时不可以直接使用，可以通过babel编译器使用。、标准用法：const obj = { foo: { bar: { baz: 42, fun: ()=>{} }, },};//...

本组件应用于Vue项目中搜索面板搜索关键词时的关键词高亮展示，组件比较简单，直接上代码吧template：<template> <span class="keywords-text-container"> <span class="keywords-box" v-html="realText"></span> &...