MiemieWan的博客

一、Vue3优点 1.类型支持更好： vue2中使用new Vue的方式会产生动态的东西，像this 使用函数的方式，函数方式减少this的使用，有益于对ts的支持 2.利于tree-shaking: vue2中很多组件与vue实例连在一起，即便没有使用，还是会被打包，没法优化 vue3中通过命名导出导入其中的大多数 API，以便打包器可以检测出未使用的代码并删除它们 3.API简化、一致性：render函数、sync修饰符，指令定义等 4.复用性：composition API 5.性能优化

一、事件循环、宏任务、微任务 1.事件循环Event Loop:浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而定制的工作机制。 2.宏任务Task: 代表一个个离散的、独立的工作单位。浏览器完成一个宏任务，在下一个宏任务开始执行之前，会对页面重新渲染。主要包括创建文档对象、解析HTML、执行主线JS代码以及各种事件如页面加载、输入、网络事件和定时器等。 3.微任务：微任务是更小的任务，是在当前宏任务执行结束后立即执行的任务。如果存在微任务，浏览器会在完成微任务之后再重新渲染。微任务的例子有P

一、调试环境搭建 1.拉取源码 git clone https://github.com/vuejs/vue.git 2.全局安装rollup：vue打包用rollup，开发时打包用webpack npm i -g rollup 3.安装依赖 npm i 4.在package.json中scripts.dev中添加--sourcemap，用于调试代码时查找源码 "dev": "rollup -w -c scripts/config.js --sourcemap --environm.

一、项目准备 创建vue项目 vue create projectName 进入项目 cd projectName 安装vuex vue add vuex 在store/index.js中写上测试代码： import Vue from "vue"; import Vuex from "./jvuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 1 }, mutations:

一、项目准备 创建vue项目 vue create projectName 进入项目 cd projectName 安装vue-router vue add router 手写vue-router:在router文件夹中创建jvue-router.js文件。 将index.js文件中引入VueRouter地址改为jvue-router.js的地址 // import VueRouter from "vue-router"; import VueRouter from "./jvu

一、模板编译 Vue.js通过编译将模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面。 模板编译成渲染函数分为三部分（解析器、优化器、代码生成器）： 将模板解析成AST（Abstract Syntax Tree,抽象语法树） 遍历AST标记静态节点。这样在虚拟DOM中更新节点时，如果发现有静态标记，则不会重新渲染它。 使用AST生成渲染函数 二、解析器 解析器内部分了好几个子解析器，比如HTML解析器、文本解析器以及过滤...

一、虚拟DOM 为什么要引入：访问DOM是非常昂贵的，会造成相当多的性能浪费。 引入前：Vue.js 1.0中，当状态发生变化时，它在一定程度上知道哪些节点使用了这个状态，从而对这些节点进行更新操作，根本不需要比对。但因为粒度太细，每一个绑定都会有一个对应的watcher来观察状态的变化，这样就会有一些内存开销以及一些依赖追踪的开销。当状态被越多的节点使用时，开销就越大。 引入后：Vue.js 2.0中，组件级别是一个watcher实例，就是说即便一个组件内有10个节点使用了某个状态，但其实也只有..

一、源码目录 二、dist目录 输出格式说明： 带有common的文件是为browserify、webpack1准备的， 带有vue.esm的文件是为webpack2+准备的， 带有common的文件是兼容带有common的文件和AMD的（可在node端和浏览器里用） 带有runtime的文件仅包含运行时，无编译器 ...