1.Vue 知识体系

1.1 基础原理

1.1.1 Vnode

❝

Vnode也称虚拟node节点,是对真实元素的抽象。诞生的背景是因为前端在很长一段时间通过直接操作Dom来达到修改视图，随着项目庞大，维护就变成一个问题。那换个角度想如果把真实Dom树抽象成为一棵以JS语法构建的抽象，然后通过修改抽象树的结构来转换成真实的Dom来重新渲染到视图。

❞

• 如何生成虚拟节点？：createElement()深入实践学习的，可阅读树酱之前写的 从0到1开发动态表单[1]

• Vnode如何检测变化并更新视图呢？diff算法

  ??? 拓展阅读：

  • 关于渲染函数render[2]

  • VNode节点及Vuejs中VNode类的定义[3]

  • [ Vue实现的diff原理]( ).MarkDown)

    1.1.2 nextTick

    ❝

    nextTick目的是将回调函数的调用延迟到下一次dom更新数据后，换句话说就是修改数据后并不会立即更新dom ，因为dom的更新是异步的，无法通过同步代码获取，需要使用nextTick，在下一次事件循环中获取（Vue中Dom的更新是异步的）

    ❞

    this.msg = “Hello world.”

    ✅ this.$nextTick(() => {

    this.msg2 = this.$refs.msgDiv.innerHTML

    })

    ??? this.msg3 = this.$refs.msgDiv.innerHTML

    ???拓展阅读：

    • Vue.js异步更新DOM策略及nextTick[4]

    • 你真的理解 $nextTick么[5]

      1.1.3 MVVM

      ❝

      MVVM全称为：Model-View-View-Model，诞生背景是在传统的MVC架构中，缺少一个数据解析的角色，而M、V、C等都不应该处理数据解析，于是专门为数据解析的就诞生了一个新的类：ViewModel，主要用于将Model和View关联起来，数据变化更新视图，视图变化更新数据

      ❞

      ???拓展阅读：

      • 廖雪峰：MVVM是什么？[6]

      • 50行代码的MVVM，感受闭包的艺术[7]

        1.1.4 双向绑定原理

        ❝

        上一节提到mvvm,本质上就是vue数据双向绑定，它是通过数据劫持结合设计模式中的发布者-订阅者模式，主要包括以下步骤

        ❞

        • 1.将数据data变成可观察：通过 Object.defineProperty()设置属性的setter和getter来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，关于更多的Object.defineProperty()实践可以阅读 树酱的如何更好管理 Api 接口[8] 中有提到 （ Vue3.0 使用Proxy替代）

        • 2.添加订阅者Watcher和添加消息订阅器Dep（ 如果数据变化，通知所有订阅者）

        • 3.实现Compile

          ???拓展阅读：

          • Vue响应式原理[9]

          • 基于 Proxy 的观察者机制探索[10]

            1.1.5 Vue相关的API

            ❝

            Vue暴露一些常用的API，包括全局、生命周期、组合、实例property等API，可以查看vue官方所有API集合文档[11]

            ❞

            • 全局 API ：比如 Vue.use( plugin )用于全局引用插件, 具体使用可阅读树酱的

            • 组合 API: 比如 project/inject 用于允许祖先组件向其所有子孙后代注入一个依赖

            • 实例property API: 比如vm.$refs 获取持有注册过ref属性的所有 DOM 元素和组件实例

              ???拓展阅读：

              • 聊聊 Vue 中 provide/inject 的应用[12]

              • 你或许不知道Vue的这些小技巧[13]

                1.2 vuex 状态管理

                ❝

                Vuex 是一个专为 Vue.js 应用开发的状态管理工具，采用集中式的存储方法来记录组件的状态，用一个对象就包含了全部的应用层级状态，而每个应用将仅仅包含一个 store 实例，但是可以用模块化来管理区分

                ❞

                1.2.1 模块化状态化管理

                ❝

                由于vuex的单一状态树，会导致说随着应用庞大，应用要管理状态集合会很大，store 对象就会显得臃肿，难以管理，那就需要用到Module区分，每个Module都拥有自己的 state、mutation、action、getter

                ❞

                ???拓展阅读：

                • vue官方：vuex的Module管理[14]

                  1.2.2 持久化管理

                  ❝

                  我们可以使用状态持久化来实现缓存状态，因为vuex的数据是存放在内存中，当我们刷新页面的时候，内存会被删除，如果我们想持久化存储一些数据，就需要依赖     localstorge或者vuex-persistedstate

                  ❞

                  • 手动利用HTML5的本地存储（localstorge）

                  • 使用vuex-persistedstate插件

                    ???拓展阅读：

                    • Vuex持久化插件-解决刷新数据消失的问题[15]

                      注意: 默认情况下每次 commit 都会向 localstorage 写入数据，localstorage 写入是同步的，这样对性能存在影响，应该分场景尽量避免频繁写入持久化数据。

                      1.2.3 vuex 五种属性

                      • state：vuex的基本数据，用来存储变量

                      • getter：从基本数据(state)派生的数据，相当于state的计算属性

                      • mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。

                      • action：Action 提交的是 mutation，并且可以包含任意异步操作，但不能直接变更状态

                      • modules：1.2.1 章节提到的vuex模块化

                        1.3 vue-router

                        ❝

                        SPA应用大多由前端路由来控制页面的跳转，通过url的切换，在不请求服务器的前提，更新页面视图，vue应用离不开vue-router,涉及知识内容包括以下几点

                        ❞

                        • hash模式和history模式有什么不同？

                        • 路由拦截应该怎么做？

                        • 路由如何实现模块化管理？

                        • keep-alive如何对组件进行缓存？

                          更多了解vue-router可以阅读树酱的 ???前端路由那些事[16]

                          • vue 路由 按需 keep-alive[17]

                            1.4 组件开发

                            ❝

                            Vue组件开发是为了通过从业务代码中解耦出代码复用率高的片段，抽出并封装为高复用的组件、涉及知识内容包括以下几点

                            ❞

                            • Vue 组件的三个重要因是什么？props、事件 和 slots

                            • 组件间是如何通信的？

                            • Vue组件化之插槽slot如何使用？

                            • mixin 在组件中可以起到什么作用？

                            • Vue高阶组件是什么？

                              1.4.1 组件间通信和传值

                              ❝

                              Vue组件的通信可以是：子父关系，也可以是子祖关系、兄弟关系。不同的的关系也就意味方式不同，主要包括以下几种方式：

                              ❞

                              • $parent与 $children

                              • $emit

                              • bus $eventBus

                              • provide与inject

                              • props 与 $refs

                                ???拓展阅读：

                                • Vue 组件间通信六种方式[18]

                                • vue组件通信全揭秘(共7章)[19]

                                  1.4.2 Slot 插槽

                                  ❝

                                  来自Vue官方介绍：slot元素作为承载分发内容的出口，简单理解就是“占坑”，子组件预先把位置占好，然后根据业务场景需要，子组件在编写相应的信息

                                  ❞

                                  ???拓展阅读：

                                  • 细谈 vue - slot 篇[20]

                                    1.4.3 Mixin 混入

                                    ❝

                                    mixin提供了一种非常灵活的方式，可以用来分发Vue组件中的可复用功能，借助Mixin多个组件可以共享数据和方法。同时引入mixin的组件，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数也将会在两个都被调用（Mixin中的钩子会先执行）

                                    ❞

                                    更多了解mixin实践可以阅读树酱的 ???组件库源码中这些写法你掌握了吗？[21] 中关于组件库mixin的用法

                                    1.4.4 高阶组件

                                    ❝

                                    高阶组件也称为HOC，它被描述为一种在组件之间共享公共功能而不需要重复代码的方法。作用在于增强组件的功能，简单定义就是：你向一个方法传入组件，然后返回一个新的组件，这就是一个HOC

                                    ❞

                                    ???拓展阅读：

                                    • Vue 进阶必学之高阶组件 HOC[22]

                                    • 探索Vue高阶组件[23]

                                    • Vue HOC 高阶组件 实践[24]

                                      1.5 axios

                                      ❝

                                      应用离不开请求库，而vue技术栈中请求库谈及最多的，非axios莫属，axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，涉及知识内容包括以下几点

                                      ❞

                                      • axios 如何做二次封装（拦截器）？

                                      • 如何结合axios做API管理 ？

                                      • axios 如何取消请求？

                                      • token过期如何在axios刷新？

                                        关于前三者的学习可以阅读树酱的???如何更好管理 Api 接口[25]

                                        ???拓展阅读：

                                        • 聊聊 Vue 中 axios 的封装[26]

                                        • 封装 axios 拦截器实现用户无感刷新 access_token[27]

                                          1.6 vue-cli

                                          ❝

                                          vue-cli是vue官方的脚手架，可以使用Vue-cli来快速构建项目，且对 Babel、TypeScript、ESLint、单元测试等提供了开箱即用的支持，简化了部署、打包、代码扫描、单元测试等流程，涉及知识内容包括以下几点

                                          ❞

                                          • 如何基于vue-cli部署项目？

                                          • 如何配置vue.config.js 打包性能最佳应用？

                                          • 本地开发跨域如何解决？

                                            1.6.1 vue-cli 部署项目

                                            ❝

                                            前端部署离不开几个环境包括本地、mock、开发、测试、预生产、生产等等，需要根据不同环境定义不同的配置文件（管理api等），还需要定义好编译脚本（packjson中的scripts），还需要注意publicpath的定义是否需要修改

                                            ❞

                                            更多了解可以阅读树酱的???基于 Vue-cli 3x的项目部署[28]

                                            ???拓展阅读：

                                            • vue官方：环境变量和模式[29]

                                            • publicPath的配置[30]

                                              1.6.2 配置最佳打包

                                              ❝

                                              前端SPA应用上线服务器本质上是编译好的静态资源上传，那编译打包就是影响性能较大的因素，那么如何配置vue.config.js打包性能最佳，可以阅读第4节的webpack配置插件，主要解决这几个问题

                                              ❞

                                              • 针对请求数进行优化: (去除prefetch)

                                              • 公用代码提取，使用cdn加载: (config.externals)

                                              • 配置代码压缩

                                                ???拓展阅读：

                                                • 我在项目中是这样配置Vue的[31]

                                                  1.6.3 本地开发devServer

                                                  ❝

                                                  本地开发中存在跨域问题？我们可以通过vue.config.js中devServer配置来做反响代理解决！如何做？看下面这篇

                                                  ❞

                                                  ???拓展阅读：

                                                  • vue.config.js中devServer配置[32]

                                                    2.工程化知识体系

                                                    ---

                                                    ❝

                                                    关于前端工程化，本质上是通过规范和工具来提高前端应用质量，树酱在之前曾梳理过，更多了解请阅读 ??? 前端工程化那些事[33]，本文在原来文章的基础上拓展和补充

                                                    ❞

                                                    2.1 Git

                                                    ❝

                                                    众所周知，git不单单只是代码管理工具，还可以做分支管理、commit message检验、Pull Request等

                                                    ❞

                                                    小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

                                                    深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

                                                    因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

                                                    由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

                                                    如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

                                                    mat,png)

                                                    ❝

                                                    关于前端工程化，本质上是通过规范和工具来提高前端应用质量，树酱在之前曾梳理过，更多了解请阅读 ??? 前端工程化那些事[33]，本文在原来文章的基础上拓展和补充

                                                    ❞

                                                    2.1 Git

                                                    ❝

                                                    众所周知，git不单单只是代码管理工具，还可以做分支管理、commit message检验、Pull Request等

                                                    ❞

                                                    小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

                                                    深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

                                                    因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

                                                    [外链图片转存中…(img-yWPDGuv4-1710918738291)]

                                                    [外链图片转存中…(img-2z5hkemK-1710918738292)]

                                                    [外链图片转存中…(img-v9FJ7SAh-1710918738293)]

                                                    [外链图片转存中…(img-lc2g86sZ-1710918738293)]

                                                    由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

                                                    如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

                                                    [外链图片转存中…(img-DXk4lW9H-1710918738294)]