Xiao_yi_fei-CSDN博客

原创 Vue的响应式——Vue源码学习总结(二)

Vue的响应式数据驱动视图：数据变化了，做一些事情让视图改变。数据劫持：当数据被访问的时候，进行拦截，此时会进行依赖收集，数据被改变你的时候，会发送通知，告诉依赖下的watcher该执行了。依赖收集：new watcher()中，其中会传入vm._update(vm._render())函数，在watcher中执行vm._update(vm._render())，在_render当中会访问数据，然后会被劫持，最后触发依赖收集的过程。通知依赖：数据改变，通知依赖执行对应的渲染函数，即vm._updat

2021-01-30 12:45:09 163

原创 Vue首次渲染的过程——Vue源码学习总结(一)

Vue首次渲染的过程1.首先是Vue实例的初始化过程，挂载一些全局的静态方法，以及原型上的一些方法。2.在_init函数的最后调用mount,$mount中调用mountComponent3.在mountComponent中new一个Wactcher，并传入vm._update(vm._render)4.在watcher中，把vm._update(vm._render)赋值给getter，最后调用get方法，在get方法中调用getter真正开始渲染视图5.vm._render其实就是用来创建虚拟

2021-01-30 12:39:41 199 1

原创手写一个简单的vue

文章目录一、观察者模式二、对Vue的整体分析三.Vue类四.Observer类五.Compiler类六.Watcher类七.Dep类一、观察者模式先上一个图来描述一下vue的响应式就是基于观察者模式进行的。其实不难理解：比如你是一个作者（发布者），很多粉丝（观察者）关注了你（订阅事件），你一旦写好了一本书发布了（触发了事件），然后粉丝就会阅读书籍（观察者根据触发的事件做一些事情）。那么在vue里面，数据改变了视图就更新，其实道理很简单，数据改变了执行一些函数（dom操作）让页面更新。用一个图来表示

2021-01-24 22:57:55 579 2

原创手写一个简单的vue-router（其实很简单）

首先回顾一下我们使用vue-router的过程。// 1. 注册路由插件（这里执行的是对应插件的install方法，所以要实现一个静态的install方法）Vue.use(VueRouter)// 2.编写路由规则const routes = [ { path: '/', name: 'Index', component: Index }]// 3. 创建 router 对象并且导出（由此得出VueRouter是一个类）const router = new Vu

2021-01-22 21:12:09 354

原创 gulp自动化构建前端项目(完整代码+详细注释)

// gulp中提供了文件读取流（src），写入流（dest），parallel（多任务同时执行），series（多任务按顺序进行），watch（监听文件变化）const { src, dest, parallel, series, watch } = require('gulp')// 这里的del不是gulp插件const del = require('del') // 这里的browserSync不是gulp插件const browserSync = require('browser-s

2021-01-12 17:21:53 171

原创自定义前端项目模板（yeoman-generator）

文章目录为什么要使用自定义的前端模板？一、下载yeoman二、创建自己的Generator1.初始化模块安装yeoman-generator编写目录（重点）编写index.js文件（重点）链接模块及拉取自定义模板发布模板到npm补充：关于this.answer在文件中呈现出来总结为什么要使用自定义的前端模板？有人会问，我要vue项目，直接使用vue-cli简单快捷下载模板不好吗？为什么要自定义模板?因为随着前端应用的发展，简单的使用vue-cli拉下来的模板不符合我们的要求，往往我们必须经过一番大改

2021-01-10 21:41:57 1059 1

原创浏览器（V8）的垃圾回收机制

文章目录内存管理什么是浏览器中的垃圾？常见的GC算法一. 引用计数二. 标记清除三. 标记整理V8内核V8的垃圾回收策略V8内存分配新生代区域及算法老生代区域及算法内存管理在学习垃圾回收机制之前，有必要学习一下内存管理的概念：1.内存：由可读写单元组成，表示一片可操作空间。2.管理：人为的去操作一片空间的申请，使用和释放。3.内存管理：开发者主动申请空间，使用空间，释放空间。4.管理流程:申请空间——使用空间——释放空间什么是浏览器中的垃圾？1.对象不再被引用时是垃圾。2.对象不能从根

2021-01-07 00:04:39 433

原创初学TypeScript

初学TypeScript为什么要使用TypeScriptTypeScript原始类型object类型数组类型元组类型枚举类型函数类型任意类型接口泛型为什么要使用TypeScript首先了解一些强类型语言和弱类型语言：强类型语言：语言层面限制函数的实参类型必须与形参相同，而且不允许任何隐式类型的转换。弱类型语言：不限制实参类型，允许任意类型转换。显然，JS就是一门弱类型的语言，弱类型的语言很容易引起类型安全的问题。弱类型语言，类型安全问题例子：因为add函数中的a与b参数没有限制类型，本身这个方法

2021-01-05 14:30:45 167 1

Xiao_yi_fei的博客