Vue源码解析
文章平均质量分 82
以实战为线索,逐步深入Vue开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
super_wanan
捡起好多小代码,堆成一座大前端~
展开
-
一看就懂的vue简版源码概述
MVVM框架的三要素:数据响应式、模板引擎及其渲染。原创 2022-09-08 10:45:33 · 491 阅读 · 0 评论 -
vue源码之视图响应式更新
前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化,但是当数据变化时,视图还不能够跟随数据实时更新。本文就在之前的基础上介绍下视图响应式更新部分。原创 2022-09-07 16:29:53 · 536 阅读 · 0 评论 -
vue源码之解析指令compile
上篇文章我们已经介绍了Vue的响应式原理,并实现了对数据的监听,监听的目的是为了及时更新视图,所以这篇文章就来介绍下vue解析指令并初始化视图部分。原创 2022-09-05 17:45:09 · 526 阅读 · 0 评论 -
Vue源码之数据响应式
vue源码之数据响应式原创 2022-09-02 17:29:51 · 447 阅读 · 0 评论 -
一看就懂的vuex核心源码
Vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说白了,Vuex就是一个全局单例模式管理的仓库,里面存储着响应式的数据,任何组件都可以从仓库里面取到数据。其可预测表现在:更改只能通过Vuex来集中更改。通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,代码将会变得更结构化且易维护。vuex的核心概念和使用方法点此直达官网:https://vuex.v原创 2022-05-25 17:51:47 · 280 阅读 · 0 评论 -
从vue中的data访问说起
demo<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>demo</title></head><style></style><body&g原创 2022-04-11 22:11:56 · 1683 阅读 · 0 评论 -
一看就懂的vue-router简版源码
1.Vue Router是什么?Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码2.Vue Router的使用方式安装: vue add rout原创 2022-04-07 16:47:02 · 1243 阅读 · 0 评论 -
vue进阶:使用插件实现弹窗类组件
在之前的文章里,已经分析了怎么实现弹窗类组件,并且介绍了两种实现弹窗类组件的方式,分别是借助Vue构造函数和Vue的extend函数。想了解的可以先看我之前的文章:vue进阶:弹窗类组件实现方式插件插件是嘛?插件通常用来为 Vue 添加全局功能。我们vue项目中最常用的插件就是vue-router。vue插件和组件的诞生都是为了实现逻辑的复用,他们的本质都是对代码逻辑的封装,所以在一定程度上,组件可以封装成插件,插件也可以改写成组件。具体使用插件还是组件就要看项目中的实际使用场景了。Vue 插件和V原创 2022-03-14 15:05:32 · 1882 阅读 · 2 评论 -
vue进阶:弹窗类组件实现方式
弹窗类组件的特点弹窗类组件的特点就是他们在当前的vue实例之外独立存在,通常挂载于body。他们是通过纯JS创建的,不需要在任何组件中声明。常见的食用方式是这样:this.$create(Notice, { title: '标题标题', message: '提示信息'}).show();分析实现思路根据上面的实用方式,我们要想实现在vue组件中全局使用this.$create()方法,就需要将该方法赋值到vue的原型对象上。假设我们已经实现了create方法:Vue.prototype.原创 2022-02-24 17:33:03 · 4644 阅读 · 0 评论 -
vue进阶:自定义指令directive
自定义指令vue提供了很多内置的指令,比如v-if ,v-show,v-model等等,通常情况下,我们是没有必要去自定义指令的,代码复用和抽象的主要形式是组件。但是呢,有的情况下,我们需要对普通的DOM进行底层操作,这个时候就需要用到自定义指令。两个常见的示例1.输入框自动聚焦原生的input组件有autofocus这个属性可以让输入框自动聚焦,但是这个属性有兼容性问题(autofocus 在移动版 Safari 上不工作),一个理想的方案就是使用自定义指令去直接触达该input元素,令其聚焦。原创 2022-02-10 09:19:18 · 354 阅读 · 0 评论 -
vue进阶:混入mixin
混入mixin混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。先定义一个混入对象:const myMixin = { created: function () { // this表示组件的实例 this.hello() }, methods: { hello: function () { console.log(原创 2022-02-09 09:10:36 · 773 阅读 · 0 评论 -
vue进阶:过滤器 filters
1.过滤器 filters过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”(|)符号指示。例如:// 在双花括号中 <span>{{ price | formatPrice('$') | test}}</span>// 在`v-bind`中 <span v-bind:price="price | formatPrice('$')"></span>filters中的函数可接受传参,传的参数顺序从函数的第二位开始往后排,函数的第一原创 2022-01-25 18:03:30 · 193 阅读 · 0 评论 -
vue进阶:计算属性与侦听器(computed VS watch)
栗子先来看个例子<template> <div> <input type="text" placeholder="请输入待办事项" @keyup.enter="insertTodo" :value="todo"> <ul v-for="(todo, i) in todos" :key="i"> <li>{{ todo }}</li> </ul>原创 2022-01-19 18:07:27 · 569 阅读 · 0 评论 -
vue组件化最佳实践
写在前面知识就是力量。 ——安琪拉知识就是力量,但更重要的是运用知识的技能。 —— 培根本文主要介绍vue组件间常见的通信方式,边界情况及插槽的使用。何为组件化?vue组件系统提供了一种抽象,让我们可以使用独立可复用的组件来构建大型应用,任意类型的应用界 面都可以抽象为一个组件树。组件化能提高开发效率,方便重复使用,简化调试步骤,提升项目可维护 性,便于多人协同开发。通常一个应用会以一棵嵌套的组件树的形式来组织:例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航原创 2021-03-05 16:40:44 · 284 阅读 · 1 评论 -
Vue源码探索之知识小储备 ——01.Object.defineProperty VS proxy
写在前面知识就是力量。 ——安琪拉知识就是力量,但更重要的是运用知识的技能。 —— 培根本文主要介绍了vue实现响应式数据/双向绑定原理的基础API的使用方法及拓展知识。vue2 基于 Object.defineProperty,vue3 基于 proxy。本文做了详细描述和对比。响应式数据/双向绑定原理Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。其中,View变化更新Data,可以通过事件监听的方式来实现,所以 Vue数据双向绑定的工作主要是如何根据Data变化原创 2020-09-27 08:17:24 · 536 阅读 · 2 评论