- 博客(8)
- 收藏
- 关注
RSS订阅原创 Vue指令的奥秘
1.自定义指令的执行时期 我们先了解一下vnode进行patch生成真实dom的生命周期：（图中说到的“修补”即patch） vdom生成真实dom的生命周期当中，create、update、destroy这三个生命周期，会去执行自定义指令： export default { create: updateDirectives, update: updateDirectives, destroy: (vnode) { updateDirectives(vnode, emptyVnod
2022-03-27 15:51:56
1169
原创 Vue2响应式原理总结
vue响应式用了观察者的设计模式，响应式data的数据被修改，观察者会进行视图更新或者执行回调 1.用Observer类将对象变成响应式 遍历对象的每个属性： 给对象的每个属性创建Dep依赖收集器 Object.defineProperty给对象的每个属性定义set、get方法： get：使用Dep来收集观察者 set：Dep派发通知给收集到的观察者 如果对象的属性也是一个对象，进行递归，重复以上操作 class Observer { construct...
2022-03-13 18:12:01
757
转载 watch源码简化版
watch源码简化版 Watch实现原理 let vm = new Vue({ el: '#app', data(){ return {name:'zf'} }, watch:{ name(newValue,oldValue){ console.log(newValue,oldValue); } } } new Vue 发生了什么： if (opts.watch) { initWatch(vm,opts.wat
2022-01-13 09:59:31
234
原创 Vue响应式原理Observer
组件初始化时会执行initState方法，主要是对props、methods、data、computed、watcher等属性做了初始化操作。这里我们分析data export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm...
2021-03-14 09:56:25
842
原创 koa中间件原理
讲一讲koa2中简单的发布订阅，以及next异步等待 const http = require('http') let list = [] let ctx = {} class Koa { use (fn) { list.push(fn) //添加订阅者，即每个use()当中的函数订阅了next } listen () { http.createServer((req,...
2019-04-22 22:01:18
267
原创 vue-router基本原理
用几十行代码分析路由的原理 let Vue /* 定义一个类，记录当前浏览器url的path或者hash */ class History { constructor () { this.current = null } } /* 当我们new Router({...})时，主要发生了以下事情 */ class Router { constructor (options) ...
2019-04-14 12:53:00
273
原创 Webpack4配置代码分割
webpack打包优化 在webpack配置文件中加入以下代码 /*chunks设置成all表示不管是同步加载还是异步加载模块，都进行代码的分割 其它选项一般不用配置，代表使用默认配置*/ optimization: { splitChunks: { chunks: 'all' } } css代码分割需要安装mini-css-extract-plugin const...
2019-04-04 20:41:57
826
原创 开发环境webpack基础配置
webpack文档内容特别多，这里整理出我平常用的webpack4.0基本的配置，给新手们参考 const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const cleanWebpackPlugin = requ...
2019-04-01 22:51:29
183
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人