皮皮网

1.Vue修改默认启动端口的码启几种方法
2.最前端｜详解VUE源码初始化流程以及响应式原理
3.Vue 源码解读（2）—— Vue 初始化过程
4.运行vue项目快捷键(生成vue代码片段的快捷键)
5.vue源码阅读解析1- new Vue初始化流程
6.Vue2.6x源码解析（一）：Vue初始化过程

Vue修改默认启动端口的几种方法

       修改Vue默认启动端口有多种方法，以下为其中几种操作步骤：

       首先，码启可以直接修改项目根目录的码启config文件夹中的index.js文件，找到端口配置项“port”，码启并将其修改为所需端口，码启如。码启dobot源码

       其次，码启可以创建一个名为vue.config.js的码启新文件，在项目根目录下，码启配置端口参数以达到修改目的码启。

       第三种方法是码启直接修改vue-cli源代码。打开项目中的码启node_modules/@vue/cli-service/lib/commands/serve.js文件，找到相关端口配置项并修改为所需端口，码启如端口。码启

       若同时设置了serve.js和vue.config.js，码启最终启动端口将以vue.config.js内的端口为准。

最前端｜详解VUE源码初始化流程以及响应式原理

       为大家分享一些实用内容，便于大家理解，希望对大家在 Vue 开发中有所助益，直接进入正题：

       Vue 源码的入口是 src/core/instance/index.js，此文件负责在 Vue 的 prototype 上注册函数属性等，并执行 initMixin 中注册的 _init 函数。

       继续观察流程，_init 方法代表初始化流程，主要代码如下：

       如果是组件，则 _isComponent 为真，其他情况下都会执行 resolveConstructorOptions，该函数将用户设置的 options 和默认 options 合并。随后执行一系列初始化函数，如 initLifecycle 初始化生命周期，initEvent 初始化事件处理机制，initRender 初始化 vnode、插槽及属性等。接下来调用 beforeCreate 钩子函数，然后是 initInjections 和 initProvide 两个与通信相关的组件。

       这里涉及到两个熟悉的生命周期函数：beforeCreate 和 created。对比 Vue 流程图，可以明确这两个钩子函数的执行时机。

       它们之间实际上差了三个初始化过程。重点是 initState 方法：

       在此方法中，如果传入 data 则执行 initData，否则初始化一个空对象。接下来可以看到 computed 和 watch 也是在这里初始化的。

       简化后的 initData 代码：

       此方法首先判断 data 是否为函数，若是则执行，否则直接取值，因此我们的 data 既可以函数，也可以是对象。然后循环 data 的 key 值，通过 hasOwn 判断属性是netty源码怎么写否有重复。

       isReserved 方法是判断变量名是否以 _ 或 $ 开头，这意味着我们不能使用 _ 和 $ 开头的属性名。然后进入 proxy 方法，该方法通过 Object.defineProperty 设置 get 和 set 将 data 的属性代理到 vm 上，使我们能够通过 this[propName] 访问到 data 上的属性，而无需通过 this.data[propName]。最后执行 observe，如下：

       前面都是在做一些初始化等必要的判断，核心只有一句：

       从这里开始，我们暂时中止 init 流程，开始响应式流程这条线。在阅读源码时，你总会被各种支线打断，这是没有办法的事情，只要你还记得之前在做什么就好。

       Observer 类是 Vue 实现响应式最重要的三环之一，代码如下：

       这里介绍一下 def 函数，这是 Vue 封装的方法，在源码中大量使用，我们可以稍微分析一下，代码如下：

       可以看到，也是使用了 Object.defineProperty 方法，上文提到过。这是一个非常强大的方法，可以说 Vue 的双向绑定就是通过它实现的。它有三个配置项：configurable 表示是否可以重新赋值和删除，writable 表示是否可以修改，enumerable 表示该属性是否会被遍历到。Vue 通过 def 方法定义哪些属性是不可修改的，哪些属性是不暴露给用户的。这里通过 def 方法将 Observer 类绑定到 data 的 __ob__ 属性上，有兴趣的同学可以去 debugger 查看 data 和 prop 中的 __ob__ 属性的格式。

       再说回 Observer，如果传入的数据是数组，则会调用 observeArray，该函数会遍历数组，然后每个数组项又会去执行 observe 方法，这里显然是一个递归，目的是将所有的属性都调用 observe。这个 observe 方法实际上是 Vue 实现观察者模式的核心，不仅是在初始化 data 的时候用到。最终，data 上的每个属性都会走到 defineReactive 里面来，重点就在这里：

       这个方法的作用是将普通数据处理成响应式数据，这里的 get 和 set 就是 Vue 中依赖收集和派发更新的源头。这里又涉及到了响应式另一个重要的类：Dep。

       在这段代码中，通过 Object.getOwnPropertyDescriptor 获取对象的属性描述符，如果不存在，网络源码怎么赚钱则通过 Object.defineProperty 创建。这里的 get 和 set 都是函数，因此 data 和 prop 中所有的值都会因为闭包而缓存在内存中，并且都关联了一个 Dep 对象。

       当用户通过 this[propName] 访问属性时，就会触发 get，并调用 dep.depend 方法（下面的 dependArray 实际上就是递归遍历数组，然后去调用那个数据上的 __ob__.dep.depend 方法），当赋值更新时，则会触发 set，并调用 observe 对新的值创建 observer 对象，最后调用 dep.notify 方法。

       总结起来就是，当赋值时调用 dep.notify；当取值时调用 dep.depend。这个方法的作用就在于此，剩下的工作交给了 Dep 类。

       接下来我们可以看一下 Dep 类中做了什么。

       这里多贴了一些代码，虽然不属于同一个类，但非常重要。这段代码初始化了一个 subs 数组，这个非常熟悉的数组就是我们经常在 Vue 的属性中看到的，它是一个观察者列表。

       前文提到，当 key 的 getter 触发时会调用 depend，将 Dep.target 添加到观察者列表中。这样，在 set 的时候我们才能 notify 去通知 update。

       另外，还要提一点，前面在设置 getter 时的代码中有这样一段：

       那么既然已经执行了 dep.depend，为什么还要执行 childOb.dep.depend，这又是什么东西呢？

       实际上，在数据的增删改查中，响应式的实现方式是不同的。setter 和 getter 只能检测到数据的修改和读取操作，因此这部分是由 dep.depend 来实现的。而 data 的新增删除的属性，并不能直接实现响应式，这部分是由 childOb.dep.depend 来完成的，这就是我们常用的 Vue.set 和 Vue.delete 的实现方式。

       接着往下看，我们发现 depend 方法将 Dep.target 推入 subs 中。在上面定义中可以看到，它是一个 Watcher 类的实例，这个类就是响应式系统中的最后一环。

       不过，我们暂时不管它，在这里还有一个重要的android源码生成html点：targetStack。可以看到有 pushTarget 和 popTarget 这两个方法，它们遵循着栈的原则，后进先出。因此，Vue 中的更新也是按照这个原则进行的。另外，大家可能注意到，这里似乎没有实例化 Watcher 对象，那么它是在什么地方执行的呢？下文会提到。

       Watcher 的代码很长，我们这里只看一小段。当 notify 被触发时，会调用 update 方法。需要注意的是，这部分已经不是在 init 的流程中了，而是在数据更新时调用的。

       这里正常情况下会执行 queueWatcher：

       可以看到，当 data 更新时会将 watcher push 到 queue 中，然后等到 nextTick 执行 flushSchedulerQueue，nextTick 也是一个大家很熟悉的东西，Vue 当然不会蠢到每有一个更新就更新一遍 DOM。它就是通过 nextTick 来实现优化的，所有的改动都会被 push 到一个 callbacks 队列中，然后等待全部完成之后一次清空，一起更新。这就是一轮 tick。

       言归正传，接着来看 flushSchedulerQueue：

       实际核心代码就是遍历所有的 queue，然后执行 watcher.run，最后发出 actived 和 updated 两个 hook。

       watcher.run 会更新值然后调用 updateComponent 方法去更新 DOM。至此，响应式原理的主体流程结束。说了这么多，其实下面这个流程图就能完整概括。

       我们回到 init 的流程，上文中 init 的流程并没有执行完，还差这最后一句：

       即通过传入的 options 将 DOM 给渲染出来，我们来看 $mount 的代码。

       前面是在获取元素以及进行一系列的类型检查判断，核心就在 compileToFunctions 这个方法上。

       看到这个 ast 我们就应该知道这个函数的作用了，通过 template 获取 AST 抽象语法树，然后根据定义的模板规则生成 render 函数。

       这个方法执行完之后返回了 render 函数，之后被赋值在了 options 上，最后调用了 mount.call(this, el, hydrating)。

       这个方法很简单，就是股票卖点指标源码调用 mountComponent 函数。

       这里的流程很容易理解。首先触发 beforeMount 钩子函数，然后通过 vm._render 生成虚拟 DOM（vnode）。这个 vnode 就是常说的虚拟 DOM。生成 vnode 后，再调用 update 方法将其更新为真实的 DOM。在 update 方法中，会实现 diff 算法。最后执行 mounted 钩子函数。需要注意的是，这里的 updateComponent 只是定义出来了，然后将其作为参数传递给了 Watcher。之前提到的 Watcher 就是在这个地方实例化的。

       至此，init 的主体流程也结束了。当然，其中还有很多细节没有提到。我也还没有深入研究这些细节，之后有时间会进一步理解和梳理。这篇文章主要是为了自己做个笔记，也分享给大家，希望能有所帮助。如果文中有任何错误之处，请大家指正。

       版权声明：本文由神州数码云基地团队整理撰写，若转载请注明出处。

       公众号搜索神州数码云基地，了解更多技术干货。

Vue 源码解读（2）—— Vue 初始化过程

       深入理解 Vue 的初始化过程，揭开面试官心中疑惑，new Vue(options) 的神秘面纱。

       寻找入口，确定 Vue 的构造函数在 /src/core/instance/index.js 文件中，采用示例代码和调试功能逐步探索。

       阅读源码，从 Vue.prototype._init 开始，了解 Vue 初始化过程，逐步解析构造函数中的各项操作。

       源码解读：从 /src/core/instance/init.js 看起，解析 resolveConstructorOptions、resolveModifiedOptions 等关键方法，逐步深入。

       优化选项合并，理解 mergeOptions 方法如何确保配置选项的正确整合。

       注入和提供，从 initInjections、resolveInject、initProvide 等方法中学习 Vue 如何处理组件之间的依赖关系。

       总结 Vue 的初始化流程，从构造函数到选项解析，再到组件注入与提供，全面掌握初始化过程。

       感谢各位的点赞、收藏和评论，期待与您的下期见面。

       学习之路永无止境，知识与习惯相伴相随。感谢您的支持与关注。

       新视频和文章会第一时间在微信公众号发送，欢迎关注：李永宁lyn。

       文章已收录到 github 仓库 liyongning/blog，欢迎 Watch 和 Star。

运行vue项目快捷键(生成vue代码片段的快捷键)

       1. 生成vue代码片段的快捷键

       检查vue.js是否安装成功了的方法：

       1、按win+r组合键打开运行窗口；

       2、输入cmd，点击确定；

       3、在打开的命令提示符中输入vue -v命令，如果显示vue相关命令，则说明vue安装成功了。使用组合键windows＋R打开运行对话框，在里面输入cmd回车打开命令提示符，在命令提示符中输入vue -v指令，回车后会弹出vue相关命令的提示，就说明vue是成功安装的了

       2. vue模板快捷键

       1.iterm2

       免费的终端神器, 然后安装好zsh和oh-my-zsh开启你的程序员之路吧，前端也可以用

       2.CodeKit

       是incident开发的一套前端开发助理工具，能够自动编译Less, Sass等前端代码，可以对js文件进行合并

       压缩

       语法检查

       工作，支持Compass

       (Sass

       )，对JPEG.PNG 格式进行压缩优化，代码编辑过程中可自动刷新浏览器查看效果

       3.postman

       用来追踪请求，查看返回数据，还可以看各种请求地址里的文件，前端必备

       4.homebrew

       用来安装各种插件和软件包

       5.dash

       各种api文档，配合alfred

       查找效果更佳哦

       6.vscode

       编辑器配合插件，前端写代码必备，插件基本上满足日常需求，还能配合zsh和iterm2使用，虽然是微软开发的，感觉比windows上好用，当然也会有人推荐sublime和coda2

       7.ps插件-cutterman

       一键切图简单高效

       8.snap

       方便截图，然后保留在一个区域，随时取用

       9.hype3

       快速设计html5特效

       .CheatSheet

       快速查各软件快捷键，提高效率

       .Cornerstone

       mac上比较好的svn软件

       .WeFlow

       是一个 GUI 的前端工具，其功能和用法可以参考市面上比较出名的一款软件：CodeKit

       .sip

       颜色拾取，方便快捷，还可以存储历史值和配色

       .pixelmator

       比ps小但功能满足需求的软件，偏设计的前端可以使用

       -----------------------------------我是分割线，不算是Mac专属的插件-----------------------------------

       1.node插件anywhere

       简单安装简单操作，搭建简单服务器，仅需两步 npm install anywhere -g;

       在项目目录下 anywhere

       2.vscode插件。

       live html边改边看页面效果，chrome也有类似插件live

       3.chrome插件,browserstack,

       在云端测试各种浏览器，比如ie;restlet Client

       调试接口；animation

       开发工具调试css3动画

       ---------------------------------------------------------------------------------------------------------------

       等等还有许多小软件和chrome插件配合开发使用，美哉

       --------..新增---------------------------------------------

       paw

       :前端请求数据，调试API工具，功能比postman更强大

       legoflow

       :前端构建化软件，可搭配vue,webpack使用

       snippetslab

       :存储代码片段，快捷指令输出

       panel

       复制粘贴神器，合理保存历史记录

       textexpander

       :高效的输出指令工具，帮助提高输入

       sketch

       :偏向设计的前端必备设计软件

       password2

       :记录密码，帮助快捷登录

       codekit

       代码构建工具

       --------..新增---------------------------------------------

       compresser:

       前端万能压缩

       regex:

       正则可视化工具

       snippetsLab

       :代码片段收集管理

       switchHosts!

       切换host

       3. vue添加代码片段

       在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 indexhtml，只有一个路由出口 [html] view plain copy mainjs，路由的重Vue怎么做实现路由跳转和嵌套

       4. vue代码自动对齐快捷键

       具体步骤如下:

       一、导入视频

       在“视频”面板，点击“添加视频”按钮，导入视频文件（可以添加爱剪辑自带的黑幕或白幕视频），作为照片的载体。

       二、在视频中添加照片

       首先在视频预览框中，将时间进度条定位到要添加照片处，然后双击视频预览框，在弹出的“选择贴图”对话框中，使用“添加贴图至列表”导入本地照片，最后把导入的照片添加至视频中即可。

       将照片添加至视频中后，通过可编辑方框，移动、缩放、旋转照片，然后在“贴图设置”一栏，设置照片的持续时长和透明度，在左侧特效列表中，勾选需要的特效。

       三、搭配背景音乐

       应用“音频”功能，为照片vlog添加动听的背景音乐。在“音频”面板点击“添加音频”按钮，选择“添加背景音乐”，然后在弹出的文件选择框中，选中音频文件，点击“打开”，进入“预览/截取”对话框，截取需要的音频片段，在“此音频将被默认插入到：”栏目，选择需要的选项，完成后点击“确定”按钮。

       四、添加文字内容

       应用“字幕特效”功能，为照片vlog添加标题、短句、旁白等文字内容。

       添加字幕后，根据视频风格，从软件自带的专业字库中选择合适的字体，并自由调整字幕的字号、排列方式、对齐方式、颜色、描边等样式效果。

       5. vue快捷键生成模板

       答:uniapp前端和后端接口对接。1. 建立项目、配置公共登陆函数新建--项目--uniapp项目--默认模版,进入main.js,编写公共登陆函数:Vue.config.productionTip = falseVue.prototype.checkLogin。

       2. 服务端代码及配置服务端源码你可以在文末或页面右侧的资源包里下载本次项目的服务端源码,上传至服务端,并在index.php配置数据库信息你可以使用Navicat。

       6. vue格式化代码快捷键

       VsCode一定要安装的几个插件

       1.Vetur -VUE语法高亮、智能感知、Emmet等,包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)。

       2.EsLint -语法纠错。

       3.Debugger for Chrome -映射vscode上的断点到chrome上,方便调试。

       4.Auto Close Tag -自动闭合HTML/XML标签。

vue源码阅读解析1- new Vue初始化流程

       深入探究 Vue 初始化流程，从 vue2.6. 版本的 src/core/instance/index.js 路径开始，引入 Vue 对象的初始化机制。首先，定义了实例构造器方法 `_init`。执行 `new Vue(options)` 即会触发此方法。进入 `_init` 内部，调用 `init.js` 文件中函数处理初始化逻辑。

       从 `init.js` 见得，初始化的核心步骤包含：实例 `vm` 的创建，以及 `render` 函数的生成。通过 `$mount` 方法引入与解析 HTML 模板或直接使用 `render` 函数，Vue 会编译模板并生成 `render` 函数，以高效执行渲染操作。

       `$mount` 方法位于 `src/platforms/web/entry-runtime-with-compiler.js` 中，其功能主要是从模板或 `render` 函数中获取执行渲染所需的 `render` 函数。这种方式在使用 `template` 编写 HTML 代码时尤为关键，可避免模板编译过程，提高效率。

       继续分析，进入 `src/core/instance/lifecycle.js` 查看 `mountComponent` 方法，了解从模板到真实 DOM 的挂载过程。`mountComponent` 方法负责准备挂载阶段，内部创建渲染 `watcher` 对象，进而调用 `updateComponent` 方法。

       深入解析 `Watcher` 对象的定义和作用，在此过程中，`vm._watcher` 被 `this` 自身所引用，`this.getter` 由 `updateComponent` 函数提供，最终调用 `get` 方法，执行 `updateComponent`，完成数据更新流程。

       通过 `src/core/instance/render.js` 路径，找到渲染函数的调用，此函数将 HTML 字符串或模板转换为虚拟节点 `Vnode`。在此，调用 `vm.update` 函数，触发核心渲染逻辑。

       `vm.update` 方法位于 `src/core/instance/lifecycle.js`，接着进入渲染核心 `patch` 函数 `src/core/vdom/patch.js`。此过程是 Vue 实现其双向数据绑定的精髓，通过 `patch` 函数解析 `Vnode` 差异，并应用更新操作，最终达到界面更新。

       新 Vue 实例的初始化流程至此结束，由模板到虚拟节点、数据绑定再到 DOM 更新，构建了一个动态、灵活且高效的前端应用框架。

Vue2.6x源码解析（一）：Vue初始化过程

       Vue2.6x源码解析（一）：Vue初始化过程

       Vue.js的核心代码在src/core目录，它在任何环境都能运行。项目入口通常在src/main.js，引入的Vue构造函数来自dist/vue.runtime.esm.js，这个文件导出了Vue构造函数，允许我们在创建Vue实例前预置全局API和原型方法。

       初始化前，Vue构造函数在src/core/instance/index.js中定义，它预先挂载了全局API如set、delete等。即使不通过new Vue初始化，Vue本身已具备所需功能。

       当执行new Vue时，实际上是调用了_init方法，这个过程会在src/core/index.js的initGlobalAPI(Vue)中初始化全局API和原型方法。接着，组件实例的初始化与根实例基本一致，包括组件构造函数的定义，以及组件的生命周期、渲染和挂载。

       组件初始化过程中，关键步骤包括数据转换为响应式、事件注册和watcher的创建。例如，组件的渲染函数会触发渲染方法，而watcher的更新则通过异步更新队列机制确保性能。

       在开发环境，Vue-template-compiler插件负责模板编译，然后runtime中的$mount方法负责实际的渲染和挂载。整个过程涉及组件的构建、渲染函数生成、依赖响应式数据的更新和异步调度。

Vue2.6源码（1）：浅析Vue初始化过程

       Vue2.6初始化过程详解

       当我们new一个Vue对象时，这个过程包含了初始化的核心步骤。虽然细节繁多，但本文将从全局流程展开，后续会逐步解析深入细节。请持续关注，获取更多内容。

       新项目中常见的初始化代码如下：

       首先，我们来探究import的Vue从何而来。在Vue的package.json中，可以看到关键配置。通常情况下，import 'vue'会加载main或module对应的js文件。若使用webpack，别名设置可能影响引入文件。

       导入的App组件是什么？Vue项目中的xxx.vue文件，实际上是一个Vue实例。浏览器无法直接识别template，Vue实例负责转化这些内容并渲染到DOM中。App组件就是新创建的Vue实例，它构建了页面的主体。

       标签#app的作用在于，Vue实例转化的组件最终会替换页面上id为app的DOM元素。

       new Vue背后发生了什么？_init方法是关键，它负责将Vue原型和构造函数的能力整合，并在$mount方法中完成实例化和挂载过程。

       _init方法执行了三个主要任务：一是继承父构造函数的能力，二是添加实例所需的各种功能，三是通过$mount方法将实例与DOM关联。$mount方法的核心是调用render函数并挂载到指定的DOM节点。

       关于$mount方法的详细解析，将在后续文章中展开。在此阶段，理解Vue的初始化过程包括：在实例上添加功能、通过$mount挂载组件为DOM。希望这些信息能帮助你深入理解Vue的初始化流程。如果你对源码或相关技术有兴趣，欢迎关注我的GitHub和微信订阅号“杨艺韬的网络日志”进行进一步交流。