Vue.js 框架源码与进阶
文章平均质量分 95
Vue.js 框架实现原理与⾼阶⽤法
每天内卷一点点
学无止尽
展开
-
Vue.js 框架源码与进阶 - 模拟 Vue.js 响应式原理
演示 Object.defineProperty 是如何使用的对象中多个属性转换 getter/setter2.2 Vue 3.xMDN - Proxy直接监听对象,而非属性ES6 中新增,IE 不支持,性能由浏览器优化对比三、发布订阅模式和观察者模式3.1 发布/订阅模式订阅者发布者信号中心Vue 中的自定义事件以及 node 中的事件机制,都是基于发布/订阅模式的兄弟组件通信过程模拟 Vue 自定义事件的实现(此处并代码并不体现发布者和订阅者,只体现原创 2022-06-21 21:41:09 · 205 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue-Router 原理实现
1.3 注册 router 对象 main.js1.4 创建路由组件的占位 App.vue二、动态路由router/index.jsDetail.vue三、嵌套路由router/index.jsLayout.vueAPP.vue四、编程式导航push 方法会记录本次历史(可以在浏览器上面后退)replace 方法不会记录本次历史 会替换历史记录go 方法会以 0 为基准跳转到相对页面五、Hash 和 History 模式区别5.1 表现形式的区别H原创 2022-06-20 17:31:56 · 234 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Virtual DOM 的实现原理
真实 DOM 成员非常多,所以创建一个 DOM 对象的成本是非常高的二、为什么使用 Virtual DOM前端开发刀耕火种的时代,手动操作 DOM 比较麻烦,还需要考虑浏览器兼容性问题,虽然有 jQuery 等库简化 DOM 操作,但是随着项目的复杂 DOM 操作复杂提升为了简化 DOM 的复杂操作于是出现了各种 MVVM 框架,MVVM 框架解决了视图和状态的同步问题为了简化视图的操作我们可以使用模板引擎,但是模板引擎没有解决跟踪状态变化的问题虚拟 DOM 跟踪状态变化,Virtual D原创 2022-06-28 16:03:08 · 288 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 响应式原理
1.3 了解 Flow官网:https://flow.org/JavaScript 的静态类型检查器Flow 的静态类型检查错误是通过静态类型推断实现的文件开头通过 // @flow 或者 /* @flow */ 声明具体的使用方式请参考博客 JavaScript 深度剖析 - 类型系统 + TypeScript1.4 调试设置打包工具 Rollup安装依赖设置 sourcemap(代码地图)执行 dev调试术语Runtime + Compiler(完整版) vs Run原创 2022-07-04 15:57:54 · 1133 阅读 · 1 评论 -
Vue.js 框架源码与进阶 - Vue.js 源码剖析 -虚拟 DOM
虚拟 DOM 实现原理请查看博客 Vue.js 框架源码与进阶 - Virtual DOM 的实现原理h 函数就是 createElement()vm.$createElement(tag, data, children, normalizeChildren)参数Vue 中的 h 函数支持组件和插槽(slots)四、虚拟 DOM 创建过程功能定义src/core/vdom/create-element.js执行完 createElement 之后创建好了 VNode,把创建好的 VNode 传原创 2022-07-05 14:54:03 · 425 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 模板编译
渲染函数 render模板编译的作用Vue 2.x 使用 VNode 描述视图以及各种交互,用户自己编写 VNode 比较复杂用户只需要编写类似 HTML 的代码 - Vue.js 模板,通过编译器将模板转换为返回 VNode 的 render 函数.vue 文件会被 webpack 在构建的过程中转换成 render 函数二、体验模板编译的结果带编译器版本的 Vue.js 中,使用 template 或 el 的方式设置模板编译后 render 输出的结果_c原创 2022-07-06 18:33:14 · 521 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 组件化
全局注册三、Vue.component 内部实现src/core/global-api/index.jssrc/core/global-api/assets.jssrc/shared/constans.jssrc/core/global-api/assets.js四、Vue.extendsrc/core/global-api/extend.js通过源码我们可以看到,它内部就是基于传入的选项对象创建了组件的构造函数,组件的构造函数继承自 Vue 构造函数,所以组件对原创 2022-07-07 15:00:34 · 286 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vuex 状态管理
Vue 最核心的两个功能:数据驱动和组件化下面是一个最简单的组件的代码,每个组件内部都有自己的数据、模板还有方法状态管理包含以下几部分:1.2.2 子组件给父组件传值子传父:Event Up在子组件中使用 $emit 发布一个自定义事件在使用这个组件的时候,使用 v-on 监听这个自定义事件可以通过 $event 访问到被抛出的这个值(使用事件抛出一个值),但在事件处理函数中是不能这么使用的1.2.3 不相关组件传值非父子组件:Event Bus我们可以使用 Event B原创 2022-07-08 15:31:19 · 251 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - 服务端渲染基础
但也也有一些很大的缺陷,其中主要涉及到以下两点:为了解决这两个缺陷,业界借鉴了传统的服务端直出 HTML 方案,提出在服务器端执行前端框架(React/Vue/Angular)代码生成网页内容,然后将渲染好的网页内容返回给客户端,客户端只需要负责展示就可以了当然不仅仅如此,为了获得更好的用户体验,同时会在客户端将来自服务端渲染的内容激活为一个 SPA 应用,也就是说之后的页面内容交互都是通过客户端渲染处理这种方式简而言之就是:工作流程:下面通过 Node.js 来了解一下这种方式:安装依赖:服务端代原创 2022-07-10 23:31:51 · 549 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Nuxt.js 基础
下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染(或用户通过 切换路由渲染页面)的流程:Nuxt 提供了两种方式用来创建项目:在 package.json 文件的 scripts 中新增上面的配置使得我们可以通过运行 来运行 nuxt启动项目现在我们的应用运行在 上运行那么,Nuxt.js 自动生成的路由配置如下:3.2 路由导航a 标签它会刷新整个页面,不建议使用 组件https://router.vuejs.org/zh/api/#t原创 2022-07-11 19:48:18 · 566 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - 搭建自己的SSR
官方文档VueSSR(Vue.jsServer-SideRendering)是Vue.js官方提供的一个服务端渲染(同构应用)解决方案使用它可以构建同构应用还是基于原有的Vue.js技术栈官方文档的解释Vue.js是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出Vue组件,进行生成DOM和操作DOM。然而,也可以将同一个组件渲染为服务器端的HTML字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。...原创 2022-07-25 19:56:43 · 491 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - 封装 Vue.js 组件库
好处main.jsroot.vue1.2.2 $parent获取的数据是响应式的parent.vuechild.vuegrandson.vue1.2.3 $children获取所有子组件parent.vuechildren1.vuechildren2.vue1.2.4 $refs如果你把它作用到普通 HTML 标签上,则获取到的是 DOM如果你把它作用到组件标签上,则获取到的是组件实例parent.vuemyinput.vue1.2.5 provide / in原创 2022-08-08 22:47:45 · 467 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js 3.0 介绍
相对于 Options API 这样做的好处:查看某个逻辑时只需关注具体的函数即可,当前的逻辑代码都封装在函数内部,不像 Options API 时获取鼠标位置的逻辑代码分散在不同的位置,查看这部分代码还需要上下拖动滚动条。在性能方面 Vue.js 3.x 又大幅度提升,使用代理对象 Proxy 重写了响应式的代码并且对编译器做了优化,重写了虚拟 DOM,从而让渲染和 Update 的性能都有了大幅度的提升。Vue 3.x 在构建时与 Vue 2.x 类似都构建了不同的版本。......原创 2022-08-09 17:48:30 · 1331 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js 3.0 快速上手(尚硅谷)
打包大小减少 41%初次渲染快 55%, 更新渲染快 133%内存减少 54%…使用 Proxy 代替 defineProperty 实现响应式重写虚拟 DOM 的实现和 Tree-Shaking…Composition API(组合 API)新的内置组件其他改变官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create3.2 使用 vite 创建官方文档:https://v3.cn.vuejs.org/guide/ins原创 2022-08-26 17:25:22 · 575 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js 3.0 响应式系统原理
/ Reflect 也有对应方法 Reflect.getPrototypeOf(),方法的作用是一样的,只是表达语意的问题。// 因为 JavaScript 的特殊性,代码在运行期间可以随意的去给对象增加成员或者获取对象中成员的信息。// 如果在 Reflect 中有对应的 Object 的方法,那么都建议使用 Reflect 中的方法。// 因为这里的 this 指向 Proxy ,所以 this.bar 执行的是代理对象的 get 方法。// effect 中的函数首先会执行一次。...原创 2022-08-16 17:58:00 · 285 阅读 · 0 评论 -
Vue.js 框架源码与进阶 - Vue.js 3.0 Vite 实现原理
回顾 vue-cli-service serve。原创 2022-08-17 16:48:36 · 504 阅读 · 0 评论