vue相关文档

vue-cli官方文档
vuex官方文档
vue-router 官方文档
vue2.6源码地址

如何调试源码

package.json 添加了--sourcemap

"scripts": {
	"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap"
}

新增html文件

<script src="./dist/vue.js"></script>
<div id="app">{{a.b}}</div>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      a: {
        b: 1,
      },
    },
    mounted() {
      this.a.b = 2;
    },
  });
</script>

入口文件在哪里

源码入口文件 scripts/config.js里查找web-full-dev，于是如果js文件为 entry-runtime-with-compiler.js

ctrl+shift+p 输入文件名字 就可以找到该文件
很多时候会用到别名，想快速找到该文件可以复制路径和上面的方法一样 也可以找到
import { warn, cached } from 'core/util/index'
别名文件是alias.js 其中一个别名如下core: resolve('src/core'),

vue3特性

1、更快：
虚拟DOM重写
优化slots的生成
静态树提升
静态属性提升
基于Proxy的响应式系统
2、更小: 通过摇树优化核心库体积
3、更容易维护： TypeScript + 模块化
4、更加友好:
跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台（Web、
Android、iOS）一起使用
5、更容易使用
改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告
更好的调试支持
独立的响应化模块
Composition API

虚拟 DOM 重写----------期待更多的编译时提示来减少运行时开销，使用更有效的代码来创建虚拟节点。
组件快速路径+单个调用+子节点类型检测

跳过不必要的条件分支
JS引擎更容易优化

优化slots生成 -----------vue3中可以单独重新渲染父级和子级

确保实例正确的跟踪依赖关系
避免不必要的父子组件重新渲染

静态树提升(Static Tree Hoisting)---------使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态的，然后将其提升，从而降低了渲
染成本。

跳过修补整棵树，从而降低渲染成本
即使多次出现也能正常工作

静态属性提升 ----------------------------- 使用静态属性提升，Vue 3打补丁时将跳过这些属性不会改变的节点。

基于 Proxy 的数据响应式 ----------- Vue 2的响应式系统使用 Object.defineProperty 的getter 和 setter。Vue 3 将使用 ES2015 Proxy 作为其观察机制，这将会带来如下变化：

组件实例初始化的速度提高100％
使用Proxy节省以前一半的内存开销，加快速度，但是存在低浏览器版本的不兼容
为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建

高可维护性 --------- Vue 3 将带来更可维护的源代码。它不仅会使用 TypeScript，而且许多包被解耦，更加模块化。

watcher底层原理