早上吃包子

本文将对vue组件如何解析以及渲染做一个讲解。 为了保证组件的隔离，每个组件通过extend方法产生一个新的类，去继承父类。并把用户通过Vue.component方法传入的 opts 合并到 vue.options.components，再vue初始化时合并Vue.option…

在讲生命周期原理之前，我们还要先讲一下vue.mixin这个和生命周期有关的api。 通俗点讲，就是对Vue构造函数做一些混入操作，影响每个vue实例。 采用策略模式，不同options（比如data、method、lifeCycleHooks）对应不同合并策略。 通过call…

watch和computed在使用上有什么不同，相信大家都很清楚。那么让我们深入来看看，他们在实现原理上有什么不同吧？ 详细：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watc…

相信看完这篇文章的你，跟我的想法是一样的。 为了实现数据变化影响视图，vue采用了观察者模式，将数据和页面渲染关联起来。通过dep收集依赖，当数据变化时，通知对应watcher更新视图。 取值时，给每个属性都加了个dep属性，用于存储这个渲染watcher （同一个watche…

最近在学习vue模版编译原理，整理一下，以后复习用。 参照这张图，一起看看具体怎么实现的吧。 上面我们已经，匹配出 开始标签、文本、结尾标签。那么问题来了，怎么把匹配出来的开始标签、文本、结尾标签，组装成一个AST树结构呢？ 前面我们已经通过调用_render函数生成一个的vn…

带着这个问题，跟我一起手写vue响应式数据原理，一探究竟吧。 1. 导出vue构造函数 2. init方法中初始化vue状态 3. 根据不同属性进行初始化操作 今天我们就只讲data初始化，其他的我放下篇文章再讲。 4. 数据劫持 先使用walk方法对data的进行遍历，将da…

可以看出，vue3指令的钩子和vue2有所区别，其他在写法上与vue2没有太大的区别。 防抖和节流相信大家也很熟悉啦，在这里就不多介绍了。我是这么区别防抖和节流的，多次触发事件只执行一次是防抖，按规定的频率执行是节流。 接下来，下面让我们一起来实现v-debounce和v-th…

使用speed-measure-webpack-plugin，可以看到loader和插件的执行耗时。 使用webpack-bundle-analyzer，构建完成后会在8888端口展示大小。 概念：一个模块可能有多个方法，只要其中某个方法使用到了，则整个文件都会被打包到bund…

子类的原型指向父类的实例，child子类的构造函数指向child。 1.子类可以重写父类的方法，导致父类的其他实例受到影响。 2.父类中公有或私有的属性，最后都会变成子类中公共的方法和属性。 3.把父类的原型放到子类的原型链上，实例想调用这些方法是基于_proto_圆形链查找机…