莫名就-CSDN博客

原创 Vue的常见问题(七) - 组件的通信方式

前言A-B、B-C、B-D都是父子关系；C-D是兄弟关系；A-C、A-D是隔代关系；一、组件的通信方式1. props父组件通过props向下传递数据给子组件。<template> <div id="app">  <Child v-bind:child="users"></Child>

2020-10-23 23:23:25 267

原创手写vue2 - 实现$mount()和简单diff算法

手写vue2 - 实现$mount和简单diff算法前言一、明确思路1. Vue2的设计思路2. 改造思路二、手写Vue21. 定义数据响应式和通知依赖更新2. JVue类和更新渲染3. Watcher类收集依赖4. Dep类依赖管理和通知更新5. 测试案例三、总结1. Vue的挂载渲染流程2. Watcher3. reader()和\_\_patch\_\_()前言在我们之前的《手写vue - 实现数据响应式、数据双向绑定和事件监听》中，有些许不足：直接模板 => dom，跳过了虚拟dom的

2020-10-22 00:14:26 453

原创 Vue的常见问题(六) - 常用的性能优化方案（待更新）

一、路由懒加载减小代码打包体积，按需加载路由页面。const router = new VueRouter({ routes: [ { path: '/foo', component: () => import('./Foo.vue') } ] }) 二、keep-alive缓存页面<template> <div id="app"> <keep-alive> <router-view/>

2020-10-21 16:57:37 377

原创框架设计模式 - MVC、MVP和MVVM的区别

MVC、MVP和MVVM的区别前言1. Web1.0时代2. web 2.0时代3. 前后端分离后的架构演变——MVC、MVP和MVVM3.1 MVC3.2 MVP3.3 MVVMMVC、MVP和MVVM的区别前言1. Web1.0时代在web1.0时代，并没有前端的概念。开发一个web应用多数采用ASP.NET/Java/PHP编写，项目通常由多个aspx/jsp/php文件构成，每个文件中同时包含了HTML、CSS、JavaScript、C#/Java/PHP代码，系统整体架构可能是这样子的：

2020-10-21 15:50:33 321

原创 Vue的常见问题(五) - 组件化的理解

对于Vue组件化的理解前言一、组件化的定义和实现1. 组件的定义2. 组件的内部实现二、组件化的优点三、总结前言我们可以从组件化定义、优点、使用场景和注意事项等方面展开陈述，同时要强调vue中组件化的一些特点。一、组件化的定义和实现用户对项目程序中具有独立逻辑、具有复用性的功能模块单独提取出来进行封装，这就是组件化的定义。组件化开发能大幅提高应用开发效率、测试性、复用性等。1. 组件的定义在Vue项目中，组件的定义一般有两种方式：Vue.component()全局APIVue.compo

2020-10-21 14:52:02 334

原创 Vue的常见问题(四) - 对于diff算法的理解

对于diff算法的理解前言一、必要性二、执行方式和高效性前言diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。diff算法并不是Vue独有的，只要涉及到虚拟dom的框架都有在使用，比如react。我们这里讨论的是diff算法在Vue中的运用，主要从三个方面讨论：必要性，执行方式和高效性。一、必要性diff算法的必要性，我们可以结合Vue源码进行讨论，我们知道

2020-10-21 01:34:42 462

原创 Vue的常见问题(三) - key的作用和工作原理

key的作用和工作原理一、案例分析1. 不使用key的情况2. 使用Key的情况二、源码分析1. diff算法简析2. key的判断三、结论一、案例分析<!DOCTYPE html> <html> <head> <title>key的作用及原理</title> </head> <body> <div id="demo"> <!-- <p v-for="item

2020-10-21 00:06:59 447

原创 Vue的常见问题(二) - Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

vue组件data为什么必须是个函数而Vue的根实例则没有此限制？一、案例分析二、源码分析1. 关于data的初始化2. 关于自定义组件和根实例的创建三、结论一、案例分析<!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> <div id="demo"> <h1>vue组件data为

2020-10-20 22:31:41 301

原创 Vue的常见问题(一) - v-for和v-if的优先级及其性能优化

v-for和v-if的优先级及其性能优化一、案例分析1. 两者同级时2. 两者不同级时二、源码解析三、结论和优化方案一、案例分析<!DOCTYPE html><html> <head> <title>Vue事件处理</title> </head> <body> <div id="demo"> <h1>v-for和v-if谁的优先级高？应该如何正确使用避免

2020-10-20 20:52:04 2828

原创 vue2源码解析(三) - Vue的批量异步更新策略与$nextTick

Vue2的异步更新策略与$nextTick源码解析前言一、事件循环机制1.概念解释1.1 事件循环Event Loop1.2 宏任务Task1.3 微任务MicroTask2. 案例解析二、Vue2的批量异步更新策略1. 概念解释1.1 异步1.2 批量1.3 异步策略2. 源码分析2.1 思维导图2.2 Watcher何时加入微任务队列？2.3 如何加入微任务队列？2.3.1 Watcher去重2.3.2 生成微服务队列数组2.3.3 定义微任务的执行方式3. 批量异步更新三、实例分析前言在我之前的文

2020-10-20 03:05:18 625 1

原创 vue2源码解析(二) - 组件化原理

Vue2的组件化流程源码解析前言一、源码位置二、源码解析1. 前置处理 - 组件的注册1.1 初始化Vue的components选项1.2 实现component方法2. 组件实例的创建和挂载2.1 组件初始化方法的定义2.1.1 获取组件构造方法2.1.2 处理组件钩子函数和生成vnode2.2 组件创建和挂载的时机2.2.1 父子组件生命周期的关系2.2.2 子组件创建和挂载的时机三、总结1. component API的注册时机2. 自定义组件创建和挂载的时机3. 父子组件的生命周期关系前言我们

2020-10-19 06:12:47 483

原创 vue2源码解析(一) - new Vue()的初始化过程

new Vue(）的初始化过程详析一、前置工作1. 获取Vue源码2. Vue源码项目文件结构2.1 项目根目录结构说明2.2 核心代码目录说明3. 调试环境搭建二、寻找项目运行入口文件三、new Vue()的初始化过程解析1. 思维导图2. 源码解析2.1 扩展$mount()方法2.2 src/platforms/web/runtime/index.js2.2.1 定义__patch__方法。2.2.2 实现$mount()。2.3 核心源码src/core/index.js2.3.1 初始化全局API

2020-10-16 05:01:15 1095

原创手写vue - 实现数据响应式、数据双向绑定和事件监听

手写vue -实现数据响应式、数据双向绑定和事件监听一、理解Vue的设计思想1、MVVM框架的三要素：数据响应式、模板引擎及其渲染1）数据响应式：监听数据变化并在视图中更新2）模版引擎：提供描述视图的模版语法3）渲染：如何将模板转换为html2、数据响应式原理二、原理分析1、流程分析2、涉及类型介绍三、手写VUE1、实现数据响应式1）前置知识点简析2）代码解析说明2、实现JVue类：框架构造函数1）调用示例：2）代码解析说明3、实现Compile模板编译类1）前置知识点简析2）代码解析说明4、实现Watch

2020-10-14 01:52:10 740

原创手写vue - 简单VueRouter的实现

vue手写简单router如何手写一个简单的router一、什么是vue-router?二、vue-router的安装使用1.安装： vue add router2.核⼼步骤：1）步骤⼀：使⽤vue-router插件，router.js2）步骤⼆：创建Router实例，router.js3）步骤三：在根组件上添加该实例，main.js4）步骤四：添加路由视图，App.vue5）导航三、vue-router做了哪些事？1.需求分析和实现目标1）spa ⻚⾯不能刷新2）根据url显示对应的内容2.需要做哪些事？

2020-10-10 15:17:57 195

原创手写vue - 简单vuex的实现

vue手写简单vuex如何手写一个简单的vuex一、什么是vuex?二、vuex的原理和思想三、如何使用vuex？简单说明1.获取值store.state.valueName2.更新值store.commit('fnName', [payload])3.分发值store.dispatch('fnName')4.派生值store.getters.fnName四、手写vuex需要做了哪些事？1.挂载$store2.实现store类五、手写vuex1.先贴代码1）我们定义的store仓库2）手写store类六、总

2020-10-05 15:48:07 374

qq_36782473的博客