qq_34306228的博客

vue的创建入口src/vnode.ts.tsvnode处理src/renderer.ts进行一系列 ast 的动作，然后交由给patch，进行diff比较，针对diff处理完成后，最后将其转化为dom，dom是交由runtime-dom去做的runtime-dom根据vnode节点，其实是要转换成dom结构的，根据 ast 和 vnode节点 来区分 web 和 weex的节点，创建好vnode后，拿着这个节点把他转换成真实能够消费的属性调用到原生的API去进行dom维度的操作

runtime和compiler区分：runtime，vue本身真正能够运行的部分，compiler，将vue2的模板语言写法，转化成vue能够直接识别的语法。vue-cli 引用的项目中，在 webpack配置里，引入了 vue-loader，就会把vue模板给做这件事，vue本身是不会做这件事的。vue2.6之后的版本都做的是兼容Vue3的内容，2.6版本前的内容才是纯vue2的内容，这里看的V2.6.14版本代码。使用函数去做的话，就可以通过 Vue的原型Vue.prototype给他去注入，

平常npm run serve，npm run dev就是执行的是 vue-cli-service serve 和 vue-cli-service dev，最终真正执行的是 node bin/vue-cli-service.js run serve，本质上也就是Commander。下面的这个就是通过vue-cli创建的默认的模板，里面有标识符，就是ejs模板化语言，在开发中称之为生成模板的过程，使用的就是ejs(嵌入式的js)还是先看cli-service的package.json找到bin的入口文件。

cli：commander+inquirer commander：cmd输入命令，inquirer：交互式选择器 通过问答的方式获取的是 options 然后去消费options，添加代码模板。上述的vue --version输出的是vue-cli版本而不是vue的版本的原因是什么呢？这里的pkg和刚刚创建的test的项目中的package.json的内容是对应着的。看一个脚手架，先看脚手架的入口文件(bin的vue)这段代码使用的是lib下的create的指令。

hooks最重要的特点：对于我们来说，不需要关心内部的逻辑，而且与Vue2相比，提供了一个非常合理的方式，使用Vue2的option API很容易写出三五千行的代码，但是对于函数式编程来说，按照逻辑功能拆分下来，一个文件至少包含一个功能，其他功能引用即可。

mixin：混用，具有合并的功能Vue2的vue.config.js中具有一个合并策略的，optionMergeStrategieshttps://github.com/vuejs/vue/blob/main/src/core/util/options.ts针对options定义一个值，有值的时候使用，没有值的时候是不使用的，后面的watch,props,methods都是基于最开始的值获取到的，在此基础上进行注入的Vue3中的已经不使用mixin了，这个方法对平常开发中不好维护，如果要注入的

全部代码：Login.vue全部代码：CommonAside.vue全部代码：router/index.js全部代码：全部代码：CommonHeader.vue全部代码：main.js全部代码：项目到此Vue2部分也就结束了

新增的代码：mock.js全部代码：全部代码：安装cookie全局代码：router/index.js全部代码：mock.js全部代码：api/index.js全部代码：Login.vue全部代码：CommonHeader.vue全部代码：

使用的组件和前面的表格使用的一致。mock.js新增代码：全部代码：index.js新增代码全部代码：Users.vue新增代码全部代码：新增和编辑功能Users.vue新增代码：全部代码：新增代码：全部代码：

src/components/CommonAside.vuesrc/components/CommonHeader.vueMain.vue全部代码：tabs.js全部代码：

mock官方文档前端用来模拟后端接口的工具，通过拦截前端发起的请求，自己定义一些数据src/api/mockServeData/home.jsmain.js安装echarts柱状图:饼状图全部代码：

Home.vue全部代码：axios中文文档下载axiossrc/utils/request.jsHome.vue

路由重复跳转会出现bug解决路由重复bug问题：CommonAside.vue顶部header组件搭建与样式修改右边用户菜单栏使用的组件store/tab.jsmain.jsCommonHeader.vueCommonAside.vueMain.vue

有时候会出现版本不一致不能运行的情况。先vue create创建一个项目，然后安装element-ui组件和vue-router,less等组件main.jspages/Users.vuepages/Main.vuepages/Home.vuepages/Login.vueApp.vueApp.vueCommonAsidesrc/pages/Mall.vuesrc/pages/pageOne.vuesrc/pages/PageTwo.vuesrc/com

基于Vue框架的国产UI组件（饿了么出品）

对于一个url来说，什么是hash值？——#及其后面的内容就是hash值hash值不会包含在http请求中，即：hash值不会带给服务器hash模式：（1）地址中永远带着#号，不美观（2）若以后将地址通过第三方手机app分享，若app校验合格，则地址会被标记为不合法（3）兼容性较好history模式（1）地址干净，美观（2）兼容性和hash模式相比略差（3）应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

HomeMessage.vueBanner.vue补充一个$router的api：gogo函数的参数表示浏览器历史记录前进/后退几步（正数为前进，负数为后退）缓存路由组件Home.vueHomeNews.vueHomeMessage.vue两个新的生命周期钩子保留缓存组件功能后新增的需求HomeMessage.vueHome.vue独享路由守卫src/router/index.js组件内路由守卫About.vue组件内守卫：

作用：让路由组件更方便的收到参数。

作用：可以简化路由的跳转如何使用（1）给路由命名：name : 'hello' , //给路由命名 path : 'welcome' , component : Hello } ] } ] } ]（2）简化跳转--简化前，需要写完整的路径--> < router-link to = " /demo/test/welcome " > 跳转

编写router配置项：//引入VueRouter import VueRouter from "vue-router";//引入路由组件 import About from "@/components/About";//创建router实例对象，去管理一组一组的路由规则并暴露router export default new VueRouter({实现切换（active-class可配置高亮样式）

Persons.vuesrc/store/index.jsCalculation.vuePersons.vueApp.vuesrc/store/countOptions.jsmain.jssrc/store/index.jsPersons.vueCalculation.vueApp.vue

Calculation.vuesrc/store/index.jsApp.vuestore/index.jsCalculation.vue借助mapState生成计算属性，从state中读取数据（对象写法）Calculation.vue借助mapState生成计算属性，从state中读取数据（数组写法）Calculation.vue（2）在main.js中创建vm时传入store配置项基本使用（1）初始化数据、配置actions、配置mutatio

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件分类：默认插槽、具名插槽、作用域插槽使用方式：（1）默认插槽：父组件中：< Category > < div > html结构1 < Category > < div > html结构1 < div > html结构1

以this.dataObj为主，依次替换this.info中的属性的值，但是this.dataObj中没有的数据，还是沿用this.info中的。this.info,…this.dataObj}：通过字面量的形式合并一下对象。与axios一致，只需要将axios替换成this.$http就行。5.vue-resource(插件库）对xhr的封装。在index.html中使用link引入。"用户输入的内容不得为空""用户输入的内容不得为空""用户输入的内容不得为空"

优点：配置简单，请求资源时直接发给前端(8080)即可。缺点：不能配置多个代理，不能灵活的控制请求是否走代理。工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

TransitionEffect.vueMoreTransition.vueThirdAnimation.vue作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。图示：写法：（1）准备好样式：（2）使用包裹要过度的元素，并配置name属性：（3）备注：若有多个元素需要过度，则需要使用：，且每个元素都要指定key值在清单被添加时与删除时候加上动画MyList.vue

School.vueStudent.vue（4）提供数据：pubsub.publish(‘xxx’,数据)（5）最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)去App.vueMyItem.vueApp.vueMyItem.vueMyList.vue使用this.$set(对象名,“属性值”,设置值) 来增加对象的属性，使得Vue能够检测到数据变化，有get和set方法MyItem.vuenextTick指定的回调函数会在dom

App.vueHeader.vueFooter.vueApp.vueMyHeader.vueMyFooter.vue使用一个中间者x组件作为桥梁，实现任意组件之间能够通信main.js实现Student.vue与School.vue组件之间通信School.vueStudent.vueVue原型身上的$on,$off,$emit不仅VC能调用到，Vm也可以但是以下写法会报错：因为new Vue代码执行完毕后，意味着整个App组件（包括子组件School）都放到页

关闭浏览器之后重新打开，数据仍还在，除非自行清除内存数据会话存储只能在一次会话中保存数据，浏览器关闭标志着一次会话的结束，所以，关闭浏览器后，保存的数据就不在了使用watch对todos进行监视，并将每次修改都存放在localStorage中School.vueStudent.vueTeacher.vueStudent.vueSchool.vueStudent.vueStudent.vue在Student上销毁Student.vue在App上可以绑定销毁

跟勾选框那个类似List.vueItem.vuereduce专门做条件统计的可以筛选出数组中想要的，例如，学生中年龄大于18的，订单中金额大于1000的，一堆人中男士有几个人等等局部代码：整体代码：结果展示：操作分析：比如有两项的todo都已完成，则todo.done有两项是true，使用reduce并对每次的todo.done进行判断，则最后的x值为2Footer.vueFooter.vue清除已完成任务App.vueFooter.vue

样式结构：Header.vueList.vueItem.vueFooter.vue初始化列表List.vueItem.vueHeader.vueList.vueList.vueItem.vue在Item.vue中的checkbox使用v-model双向绑定，虽然也能实现功能，但是不推荐，因为有点违反原则，因为修改了props值，Vue的检测是浅度检测，props中是todo对象时，使用todo.done改值后，地址值并没有修改，则Vue检测不到，所以未报错

作用：让样式在局部生效，防止冲突写法：

文件目录介绍package.json文件main.jsassests文件index.html页面-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 --> < meta http-equiv = " X-UA-Compatible " content = " IE=edge " >

h2>学校地址：{{address}}学生姓名：{{name}}学校地址：{{address}}学校地址：{{address}}学校名称：{{name}}学校名称：{{schoolName}}学校名称：{{name}}学生姓名：{{name}}老师姓名：{{name}}学校名称：{{name}}

用定时器实现错误：用methods实现原因：所以上述方法不可行生命周期：没有加template时的效果：使用template时候的效果：常用的生命周期钩子：关于销毁Vue实例：

收集表单数据：过滤器调用步骤：script调用步骤：过滤器：定义：对要显示的数据进行特定格式化后显示(适用于一些简单逻辑的处理)语法：备注：我们学过的指令：v-bind：单向绑定解析表达式，可简写为 :xxxv-model：双向数据绑定v-for：遍历数组/对象/字符串v-on：绑定事件监听，可简写为@v-if：条件渲染（动态控制节点是否存在）v-else：条件渲染（动态控制节点是否存在）v-show：条件渲染（动态控制节点是否展示）v-text 指令：可以解析 html

v-for指令：若在列表中同时存在输入框时会出现以下问题：出现问题的原因是Vue在生成虚拟dom时候使用对比(diff)算法，下面是运行过程图：就能得到正确结果，其运行过程如下所示：面试题：Vue、React中的key有什么作用？ (key的内部原理）

并限制姓的长度不满足插值语法的简洁要求计算属性：千万不能将fullName理解成函数调用，fullName是vm的属性第二种用计算属性的写法加上控制台输出没有控制台输出在绑定事件时候，@xxx=“yyy” ，调用函数是一个语句时候，yyy可以直接写成语句第三种用监视属性写监视属性监视属性watch：当创建实例时候不知道要监测谁，后续根据用户行为是否监视再进行添加深度监视深度监视：（1）Vue中的watch默认不监测对象内部值的改变（一层）（2）配置deep:true可

事件的基本使用：Vue中的事件修饰符：a标签的页面不会跳转showTip事件不会触发不使用self时候，点击按钮，会发生冒泡，打印两次，但是event.target还是button事件，所以两次输出的当前操作的元素都是button事件使用self时候，点击按钮，但是由于外层的div当前操作元素是button不是div，所以外层即便冒泡也不会打印输出鼠标滚轮滚动，即便滚动到最底部，也能依旧触发该事件，但是如果是页面滚动条事件的话，到底部之后就再不会触发该事件了。正常运行

VM：视图模型（ViewModel)：Vue实例对象。通过一个对象代理对另一个对象中属性的操作（读/写）//控制属性是否可以被修改，默认值是false。//控制属性是否可以被删除，默认值是false。M：模型（model)：对应data中的数据。//控制属性是否可以枚举，默认值是false。V：视图（View)：模板代码。"有人读取age属性了""有人修改age属性了"// age不能枚举。// age不能修改。// age不能删除。