vuex

前言 面试竞争力越来越大，是时候撸一波Vue和React源码啦； 本文将前2个月面试总结成从20个层面来对比Vue和React的源码区别； 文章有点长，可以收藏，慢点品尝； 如果需要了解API的区别，请戳： Vue 开发必须知道的 36 个技巧 React 开发必须知道的 34 个技巧 文章源码： 请戳 ，原创码字不易，欢迎star！ 1.Vue和React源码区别 1.1 Vue源码 来张Vue源码编译过程图 图片来源： 分析Vue源码实现 1.1.1 挂载 初始化$mounted会挂载组件,不存在 render 函数时需要编译(compile); 1.1.2 compile 1.compile 分为 parse，optimize 和 generate，最终得到 render 函数； 2.parse 调用 parseHtml 方法，方法核心是利用正则解析 template 的指令，class 和 stype，得到 AST； 3.optimize 作用标记 static 静态节点，后面 patch,diff会跳过静态节点； 4.generate 是将 AST 转化为 render 函数表达式，执行 vm._render 方法将 render 表达式转化为VNode，得到 render 和 staticRenderFns 字符串； 5.vm._render 方法调用了 VNode

❝ 前沿：树酱君是个渣渣，梳理了下发现还是蛮多知识点不够扎实，童鞋有机会也定期给自己做个复盘和回顾，梳理自己的知识体系。再加上前端娱乐圈变化多端，以至于我们既要加强对底层基础知识的巩固，查漏补缺，也要保持对新事物探索的好奇心。那树酱我是如何构建自己的知识体系呢？（特别算法是硬伤啊）⏰ 该本章为上下两章，本次分享是上章 ❞ 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原理](https://github.com/answershuto/learnVue/blob/master/docs/VirtualDOM%E4%B8%8Ediff(Vue%E5%AE%9E%E7%8E%B0 "

Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。 vuex有哪几种状态和属性 1、state – 存放状态 2、getters – state的计算属性 3、mutations – 更改状态的逻辑，同步操作 4、actions – 提交mutation，异步操作 5、mudules – 将store模块化 vuex的流程：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值 vuex的State特性 Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。 1、Vuex就是一个仓库

dynamic-router 项目地址 gitee 前端： 基于 vue-element-admin 延用公司 【用户中心】那一套自己魔改的版本，在此基础之上重构。 后端： Go 的语法简洁，开发速度快，所以后端使用了 Go 结合 Gin 框架，做了一个简单的 CURD 服务。（主要是因为没人手协助，也只好自己写一个了。）这里不过多介绍后端。 前言 动态路由 由于公司业务需要，在权限验证与安全方面，要求是菜单根据权限动态控制。 在现有的项目当中，通过基于 vue-element-admin 项目提供的菜单权限控制，无法满足公司的具体业务需要。 实际上主要的目的是通过后端控制菜单权限。 因此也迭代出了两个版本， 版本二 也只是提供一个设计思路，具体复杂实现基于此套是是可以满足的。这里只做简单的阐述，具体实现可以结合源码。 版本一 在公司项目 【用户中心】 中，我采用的是通过后端菜单列表以及权限标识，做深度递归和匹配。这么写一部分原因是因为是在现有的接口文档基础之上做 魔改 ，第二点也是因为代码耦合度比较高，重构的话周期长（前后端都需要改，前端工作量会很大）。 Interceptor router.beforeEach(async (to, from, next) => { NProgress.start(); if (getToken()) { if (to.path ===

没有特别的幸运，那么就特别的努力！！！ 2020 前端面试题上 vue篇 vue篇 vue 双向绑定原理 v-model 的原理 scoped样式穿透 组件之间的传值通信 axios拦截器怎么配 自定义指令 vuex computed 和 watch区别 filter与computed 计算属性——判断是否有图片 v-if & v-show & v-for v-bind & v-mode vue生命周期 $set , $get() trim 过滤首位空格 谈谈你对 keep-alive 的了解 组件中 data 为什么是一个函数？ vue 父组件调用子组件方法 vue-router 路由模式有几种？ 动态路由 delete与vue.delete区别? Vue2.0 v-for 中 :key 到底有什么用？ vue相对于jq好处，优点 axios怎么做到同步 ajax与axios的区别？ sass与less区别 你都做过哪些Vue的性能优化？ 结语 vue篇 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 vue 双向绑定原理 Vue是采用数据劫持结合发布

vue.config.js完整代码如下： 'use strict' ; // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path' ); const resolve = (dir) => path.resolve(__dirname, dir); // 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' ; // gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin' ); const cdn = { // 忽略打包的第三方库 externals: { vue: 'Vue' , vuex: 'Vuex' , 'vue-router': 'VueRouter' , axios: 'axios' , }, // 通过cdn方式使用 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js' , 'https://cdn.bootcss.com/vue-router