走进Vue

Vue3官网中有下面这样一张图，基本展现出了Vue3的渲染原理： 本文会从源码角度来草率的看一下Vue3的运行全流程，旨在加深对上图的理解，从下面这个很简单的使用示例开始： 通过createApp方法

Vue Demi是什么 如果你想开发一个同时支持Vue2和Vue3的库可能想到以下两种方式： 1.创建两个分支，分别支持Vue2和Vue3 2.只使用Vue2和Vue3都支持的API 这两种方式都有缺

上一篇我们看了引入Vue时都有哪些操作，这一篇我们来看一下new一个Vue实例时会发生什么，测试代码如下：

引入`Vue`时`Vue`做的事情其实就是创建了一个构造函数，然后在到处扩展原型方法、静态方法、静态属性等等。

我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。

在大型应用里，有些组件可能一开始并不显示，只有在特定条件下才会渲染，那么这种情况下该组件的资源其实不需要一开始就加载，完全可以在需要的时候再去请求，这也可以减少页面首次加载的资源体积...

开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现（传送门：快速搭建一个代码在线编辑预览工具），实现了css、html、js的编辑，但是对于demo场景来说，vue单文件也是一个比较好的代码组

本篇来分析一下这两个问题，另外简单看一下自定义元素是怎么渲染的。 通过this.xxx访问计算属性时会调用我们定义的computed选项里面的函数。 其次在模板编译指令解析的阶段计算属性和普通属性并没有区别，这个v-text指令会创建一个Directive实例，这个Direct…

可以看到也是通过指令的方式，这个版本只有支持两个类，一个是进入的时候添加的v-enter，另一个是离开时候添加的v-leave。 这个指令不会创建watcher，因为指令的值要么是css的类名，要么是JavaScript动画选项的名称，都不需要进行观察。指令绑定时所做的事情就是…

它没有直接调用指令的update方法，而是交给了batcher，本篇来看一下这个batcher做了什么。 能清晰的发现通过异步更新能跳过中间不必要的渲染以达到优化性能的效果。 push方法做的事情是把watcher添加到队列quene里，然后如果没有扔过flush给nextTi…

多个过滤器之间使用|进行分隔。 带过滤器的会多一个filters字段。 可以看到完全就是为了得到目标值的一个多此一举的过程，下一步来支持逗号分隔的冒号表达式。 判断一下冒号之前的字符里是否存在?，存在的话就代表是三元表达式，则不进行分割。 因为过滤器支持带参数，参数和过滤器名之…

因为vue指令很多，功能也很多，所以会有很多针对一些情况的特殊处理，这些逻辑如果不是对vue很熟悉的话一时间是看不懂的，所以我们只看一些基本逻辑。 该方法会根据实例的一些状态来判断处理某个部分使用哪个方法，因为代码极大的简化了所以不是很明显。 所以linkFn以及nodeLin…

上篇介绍了创建vue实例时大概做了一些什么事情，其中有一项是初始化数据，本篇来看一下数据观察具体是怎么做的。 _proxy方法上一篇已经说过了，就是把data数据代理到vue实例上，可以通过this.xx访问到this.data.xx的数据，关键是Observer。 从这里可以…

各位，你们没有看错，现在是2021年，vue3.0都已经出来很长一段时间了，而本系列将要带各位阅读的是0.11版本，也就是vue最早的正式版本，发布时间大概是六七年前，那时，嗯，太久远，都忘了我那时候在干什么，原因是2.0和3.0已经是一个很完善的框架了，代码量也很大，作为一个…

在通读了vue的官网文档后，我记录下了如下这些相对于2.x的变化之处。 改成这样的最主要原因是为了避免对Vue的全局配置会影响每个创建的实例。 之前在非组件的情况下创建实例可以使用对象，但是现在所有情况下都只能使用一个返回对象的函数。 beforeDestroy=>before…

9月19号，万众期待的vue3.0如期而至，事实上很多人很早就已经体验过了，但是本人比较懒，再加上没有正式发布也不能在项目上使用，所以一直没去尝试，只在一些零星的文章上看到了它大概会有一些什么新功能，现在它的正式发布意味着已经推荐在新项目上使用它了，毕竟相对于2.0，它的优点还…