面向高阶
文章平均质量分 73
小小liang
一个在深圳捡破烂的前端
展开
-
vue之常用的辅助函数mapState、mapMutations、mapActions
目录vue之常用的辅助函数mapState、mapMutations、mapActions![在这里插入图片描述](https://img-blog.csdnimg.cn/5c527abc4144434281d33e6789ce03b5.png#pic_center)store / modules / about.jsstore / mutation-type.jsAbout.vuevue之常用的辅助函数mapState、mapMutations、mapActionsstore / modules /原创 2021-11-25 17:42:02 · 253 阅读 · 0 评论 -
vue之mixin的使用
目录vue之mixin的使用mixin之中的data数据访问mixin / index.jsHome.vueAbout2.vuevue之mixin的使用作用:在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了data数据的等访问原则:若是使用mixin的当前组件有该 data数据 或者 methods方法的话 直接运用的是当前组件的数据或者方法,否则的话直接继承mixin内部的数据与方法mixin之中的原创 2021-11-24 17:36:36 · 906 阅读 · 0 评论 -
vue源码系列4之虚拟dom和真实dom
目录vue源码系列4之虚拟dom和真实domcompiler / index.jsinit.jslifecycle.jsindex.jsrender.jsvnode / index.jsvnode / patch.jsvue源码系列4之虚拟dom和真实dom流程:// 判断用户是否 传入了render , 没传入时,可能传入了template。template没有传入时候,就拿最外面的 <div id="#app"></div>作为模板// 将我们的html ->原创 2021-11-18 22:15:39 · 1064 阅读 · 2 评论 -
vue源码系列3之 render函数 与 模板编译 与生成ast树结构
目录vue源码系列3之 render函数 与 模板编译init.jscompiler / index.jsvue源码系列3之 render函数 与 模板编译init.js当对vm实例对象数据初始化后,则想对应的需要针对视图模板进行渲染(挂载-编译-渲染等步骤)首先先判断是否有挂载模板 - el vm.$options.el如果有挂载el 模板 ,那么需要针对el模板进行data数据的勾连其中Vue.prototype.$mount作用为 使得数据与模板进行挂钩在data数据渲染之前,需要先原创 2021-11-11 21:05:29 · 786 阅读 · 0 评论 -
vue源码系列之 响应式数据处理2 数组的重写
目录vue源码系列之 响应式数据处理2 数组的重写array.js对数组的方法进行重写oldArrayPrototype 原始的数组方法arrayMethos = Object.create(oldArrayPrototype) 创建一个新的对象,也就是拷贝原始数组的方法methods 中的方法,是会影响原始数组的,因此需要重写这些方法遍历这些会改原始数组的方法,然后执行步骤是先执行自己定义的arrayMethos 方法,之后再调用原始数组的方法其中最主要的是:假如args传入的实参原创 2021-11-08 21:46:11 · 1146 阅读 · 3 评论 -
vue源码系列之 响应式数据处理
目录vue源码系列之 响应式数据处理index.htmlsrc / index.jssrc / init.jsstate.jsobserve / index.jsvue源码系列之 响应式数据处理index.html创建一个Vue实例对象,并且传入一个对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp原创 2021-11-04 21:51:31 · 216 阅读 · 0 评论 -
vue之$nextTick(callback)
目录vue之$nextTick(callback)作用vue之$nextTick(callback)源码vue之$nextTick(callback)作用this.$nextTick(callback) 作用:处理vue中的dom异步更新,粗暴的说就是dom渲染之后,就会执行callback函数<template> <div> <div ref="msgRef">about1 {{ msg }}</div> <button原创 2021-09-30 20:18:10 · 407 阅读 · 0 评论 -
面向高级之webpack4基础1
目录面向高级之webpack基础1安装nvm与node–save-dev || -D 与 --save || -S的区别简单初始化项目之基础配置webpack4之基础2 webpack.config.js配置0:mode的模式1:enter的使用方式 - 打包的入口2:output打包的出口3:loader加载器 - scss - less 预编译处理器等处理 es6等语法转化解析ES6对react语法的解析4:plugin插件 -面向高级之webpack基础1安装nvm与nodenvm 的安装原创 2021-09-26 21:39:11 · 119 阅读 · 0 评论