vue、react、webpack、babel 前端知识体系总结

vue，react，webpack，babel 要点总结

Vue

基本使用

v-html

• 原始html内容，有xss风险

computed

• 有缓存，data不变不会重新计算

watch

监听引用类型，使用下面方法深度监听，但是拿不到oldVal

watch:{
    info: {
        handler (oldVal, val) {
            console.log((oldVal, val)
        },
        deep: true
    }
}

class 写法

data () {
    isblack: true,
    isRed: false,

    black: "black",
    red: "red"
}
:class={black: isblack, red: isRed}

或者

:class=[black, red]

style

• object 类型
• 驼峰写法

v-if 和 v-show 区别

• v-if 是否渲染，更新不频繁使用
• v-show 是通过 css 的 display 控制显示与隐藏，频繁切换使用

v-for

• 也可以遍历对象
• key，不能乱写，尽量不用index，不用random
• v-for 优先级比v-if高

事件

event参数，自定义参数

• 没有参数，直接可以获取
• 有参数，用$event
• event是原生对象

事件修饰符，按键修饰符

@click.stop.prevent
@click.ctrl.exact

！（观察）事件被绑定到哪里

event.target的值表明事件是挂在当前元素上的

表单

v-model

• v-model.trim
• v-model.lazy
• v-model.number

组件使用

props

简写

props:['list']

复杂写法，常用，可以定义类型和默认值

props: {
    type: Array,
    default:{
        return []
    }
}

$emit

父组件

<Input @add="clickhandler"/>

子组件

methods:{
    addTitle() {
        this.$emit('add', title)
    }
}

组件通信 - 自定义事件（兄弟组件通信）

vue 具有自定义事件能力 $on、$off、$emit

组件卸载时，解除事件绑定，销毁子组件，定时器等

组件生命周期

单个组件

• created：vue实例化完成
• mounted：渲染完成

父子组件

• 组件实例创建： 先父后子
• 组件渲染： 先子后父【子组件渲染完，才能挂载】

高级特性

自定义 v-model

父组件中

<CunstomVModal v-model={name}>

子组件中 CunstomVModal

<template>
 <input type="text" :value="txt" @input="$emit('chage', $event.target.value)"
</template>
<script>
    export default {
        model:{
            prop: 'txt',
            event:'chage'
        },
        props:{
            txt: String,
            default () {
                return ''
            }
        }
    }
</script>

$nextTick、refs

• vue 是异步渲染
• data 改变之后，dom不会like渲染
• $nextTick 会在dom渲染之后被处罚，以获取最新的dom节点

slot

• 基本使用
• 作用于插槽
• 具名插槽

动态组件

• :is=”component-name”
• 需要根据数据，动态渲染的场景。即组件类型不确定

<template>
 <component :is="compName">
</template>
<script>
 import myComp from './myComp'
    components:{
        myComp
    },
    data () {
        return {
            compName: 'myComp'
        }
    }

</script>

异步组件

• import()
• 按需加载，异步加载大组件

export default {
 components:{
 Demo: () => import('./ImportDemo')
 }
}

keep-alive

• 缓存组件
• 频繁切换，不需要重复渲染
• vue常见性能优化

// 每个组件只渲染一次，且不会销毁。
// 简单的用v-show就行，稍微复杂的用keep-alive
<keep-alive>
    <A v-if="a"></A>
    <B v-if="b"></B>
    <C v-if="c"></C>
</keep-alive>

mixin

• 多个组件有相同的逻辑，抽离出来
• mixin并不是完美的解决方案，会有一些问题
• vue 3 提出的 composition API 旨在解决这些问题

---

问题

• 变量来源不明确，不利于阅读
• 多个mixin可能会造成命名冲突
• mixin和组件可能会出现多对多的关系，复杂度较高

---

<sript>
    import Mixin from './mixin'
    export default {
        mixins: [Mixin],
        data () {
            return {}
        }
    }
</sript>

vuex 使用

• 基本概念、基本使用、API
• state的数据结构设计

vuex基本概念

• state
• gettters
• action
• mutation

用于vue组件

• dispatch
• commit
• mapstate
• mapGetters
• mapActions
• mapMutations

vue-router

路由模式：

• hash

• window.onhashchange

• 会出发网页跳转，

• 可前进后退，

• 不会提交到server端，强制刷新也不会

• 可刷新

• H5 history

• history.pushState

• window.onpopstate

• 不可刷新（需要后端支持）

路由配置：

• 动态路由 {path: ‘/user/:id?’, component: User}
• 懒加载 {path: ‘/user/:id?’, component: () => import(‘./user’)}

Vue原理

如何里面MVVM

• 很久以前的视图

• asp jsp php 已经有组件化了

• 传统组件，只是静态渲染，更新依赖于操作dom

• 数据驱动视图（vue MVVM，react setState）

vue 响应式

• 组件data的数据一旦变化，立刻出发视图更新

• 核心API - Object.defineProperty

• get

• set

• Object.defineProperty 的一些缺点 （Vue3.0 使用 Proxy）

• proxy 兼容性不太好，且无法 polyfill

Object.defineProperty 缺点

• 深度监听，需要递归到底，一次性计算量大
• 新增，删除 无法监听，需要用 Vue.set 和 Vue.delete
• 无法监听数组，需要专门处理

Proxy 实现响应式

• 基本使用

• Reflect

• 实现响应式

• 对比 defineProperty 提高性能

• set第一层属性的时候，触发set

• set第二层属性的时候触发第一层属性的get

• 所以在get的时候，返回一个 新的proxy对象即可 深度监听，而且是惰性监听

• 所以性能比defineProperty好

虚拟DOM 和 diff

• DOM操作非常耗性能，js是执行非常快的
• vue和react是数据驱动视图

vdom

用js模拟dom结构，计算出最小的变更，操作dom

snabbdom

• h函数，返回vnode（js）
• patch(container, vnode) 初次渲染
• patch(oldVnode, newVnode) 更新，新旧vnode都有children，那么updateChildren
• patch(oldVnode, null) 销毁清空

diff

• 只比较同一层级，不跨级比较
• tag不相同，直接删掉重建，不再深度比较
• tag和key都相同，则认为是相同节点，不再深度比较

模板编译

• vue将模板编译为render函数
• 执行render函数生成vnode，patch
• 触发响应式，监听data属性getter setter

• with语法
• vue组件可以用render代替template

初次渲染过程

• 解析为render函数
• 触发响应式，监听data属性getter setter
• 执行render函数，生成vnode，patch

更新过程

• 修改data，触发setter，（此前在getter中已被监听）
• 重新执行render函数，生成newVnode
• patch(oldVnode, newVnode)

组件异步渲染

• $nextTick
• 汇总data修改，一次性更新视图
• 减少dom操作次数，提高性能

Vue3

新功能

• createApp

// vue2
const app = new Vue({})
Vue.use()
Vue.mixin()
Vue.component()
Vue.directive()
// vue3
const app = Vue.createApp({})
app.use()
app.mixin()
app.component()
app.directive()

• emits属性

emits: ['onClickhandler'] // 建议 onXxx

• 生命周期

• beforeDestroy 改为 beforeUnmount

• destroyed 改为 unmounted

• 多事件处理， @click=”one($event),two($event)”

• Fragment, 模板不需要包在一个根组件中了，template下面可以写多个标签

• 移除.sync改为v-model参数

• 异步组件的引用方式， defindAsyncComponent

• 移除filter，如：v-if=”boolA | boolB”

• Teleport，

• Suspense

<Suspense>
 <template>
    <Test1/> <!-- 是一个异步组件 -->
 </template>
 <!-- 具名插槽
    即：Suspense 组件内部，有两个slot，
    其中一个具名为 fallback
 -->
 <tempalte #fallback>
    Loading...
 </tempalte>
</Suspense>

• Composition API

• reactive

• ref toRef toRefs

• readonly

• computed

• watch watchEffect

• 钩子函数生命周期

原理

• proxy 实现响应式

• 对值类型无能为力，所以要用 ref

• 编译优化

• PatchFlag 静态标记

• hoistStatic 静态提升

• cacheHandler 缓存事件

• SSR 优化

• Tree-shaking 优化

Vue3 比 vue2 优势

• 性能更好
• 体积更小
• 更好的ts支持
• 更好的代码组织
• 更好的逻辑抽离
• 更多的新功能

生命周期

• beforeDestroy 改为 beforeUnmount
• destroyed 改为 unmounted
• 其他沿用vue2的生命周期
• setup等于 beforeCreate 和 created

import { onBeforeMount } from 'vue'

export default {
    <!-- 其他代码 -->
    setup () {
        onBeforeMount(() =>  {
            console.log('onBeforeMount')
        })
    }
    <!-- 其他代码 -->
}

Composition API 对比 Options API

• 更好的代码组织
• 更好的逻辑复用(options api 分散于生命周期中，代码越多越明显)
• 更好的类型推导(直接this.a 和 this.fn，不利于类型判断 )
• 不建议共用

export default {
    data () {
        return {
            a: 10
        }
    },
    methods: {
        fn () {
            const a = this.a
        }
    },
    mounted: {
        this.fn()
    }
}

ref toRef toRefs

• toRef 将一个响应式对象中的某个属性变为ref
• toRefs 将一个响应式对象变为普通对象，这个普通对象的每个属性变为ref

<template>
    <div>{{name}}{{ageRef}}</div>
    <div ref="eleRef">我是文字</div>
</template>

<script>
    import { ref, toRef, toRefs, reactive, onMounted } from 'vue'

    export default {
        name: 'Ref',
        setup() {
            const eleRef = ref(null)
            const ageRef = ref(20)
            // 两者保持引用关系↓
            // 不能返回解构的state，会丢失响应式
            const state = reactive({
                name: '张三'
            })
            const nameRef = toRef(state, 'name')
            nameRef.value = '李四' // state中的name也会改变
            state.name = '王五' // nameRef的值也会改变
            // 两者保持引用关系 ↑
            ageRef.value = 30
            onMounted(() => {
                console.log(eleRef.value.innerHTML)
            })

            // const stateRefs = toRefs(state)
            // const {name: nameRef} = stateRefs
            // return stateRefs // toRefs的返回

            // 其他返回
            return {
                ageRef,
                eleRef
            }
        }
    }
</script>

为什么要用 Ref

• 返回 值类型，会丢失响应式
• 如在setup、computed、合成函数，都有可能返回 值类型
• vue如果不定义ref。用户将自造ref，反而更混乱

为什么要.value

• ref 是个对象（不丢失响应式），value存储值
• 通过.value属性的get和set实现响应式
• 用于模板、reactive时，（vue可以自己控制）不需要.value，其他情况都需要

Composition API 实现逻辑复用

• 抽离逻辑代码到一个函数
• 函数命名约定为 useXxx 格式
• setup中引用 useXxx 函数

Proxy 实现响应式

• 基本使用

• Reflect

• 实现响应式

• 对比 defineProperty 提高性能

• set第一层属性的时候，触发set

• set第二层属性的时候触发第一层属性的get

• 所以在get的时候，返回一个 新的proxy对象即可 深度监听，而且是惰性监听

• 所以性能比defineProperty好

watch 和 watchEffect 的区别

• 两者都可以监听data属性变化
• watch 需要明确监听哪个属性
• watchEffect会根据其中的属性，自动监听其变化

// watch 默认不会立即执行
// 监听ref
watch(nameRef, (newVal, oldVal) => {}, [options])
// 监听响应式
watch(() => state.name, (newState, oldState) => {}, [options])

watchEffect(() => {
    // 初始化就会执行一次，收集监听的数据
    console.log('watchEffect')
})
watchEffect(() => {
    // 写了 state.name 就监听， 不写的不会监听
    console.log(state.name)
})

setup中如何获取组件实例

• 在setup 和 Composition API 中没有this
• 可通过 getCurrentInstance 获取当前实例
• 若使用 options API 可照常使用 this

vue3 为何比 vue2 快

• Proxy 响应式
• PatchFlag // 标记节点类型
• hoistStatic // 缓存静态节点，多个节点合并
• cacheHandler //
• SSR 优化
• tree-shaking

PatchFlag

• 编译模板时，动态节点做标记
• 标记分为不同类型，如 TEXT PROPS
• diff算法时，可以区分静态节点，以及不同类型的节点

hoistStatic

• 将静态节点的定义，提升到父作用域，缓存起来
• 多个相邻的静态节点，会被合并起来
• 典型的拿空间换时间的优化策略

cacheHandler

• 将事件缓存起来

vite - ES6 module

React

基本使用

setState

• 不可变值，为了SCU
• 可能异步可能同步
• 可能会被合并

是同步还是异步

• 直接使用是异步的
• 在setTimeout或者自定义的dom事件中是同步的

何时会合并

• 对象形式，会被合并
• 函数形式，不会合并

this.setState((state, props) => {})

• 直接修改state的值，影响性能

事件为何要bind this

• class生成的实例中，this是undefined

Reaact 高级特性

• 函数组件
• 非受控组件
• Portals ReactDOM.createPortals()
• context
• 异步组件，import() React.lazy React.Suspense
• 性能优化，SCU 核心问题是 不可变值
• 高阶组件HOC
• render props

jsx 本质是什么

• React.createElement 函数，执行返回 vnode

事件合成机制

• div 冒泡至 document，合成统一的react event，dispatchEvent事件派发交由对应的处理器执行
• 更好的兼容性和跨平台
• 挂载到根节点，减少内存消耗，避免频繁解绑
• 方便统一管理（如事务机制）

transaction 事务机制

Transaction类的主要作用使用提供的包装（Wrapper）来包装一个函数。
Transaction会接受一个方法
func，和一组Wrapper。Transaction会在func执行之前，执行一组Wrapper中的initialize方法。而后执行func方法，在func方法执行完了之后，执行Wrapper提供的所有close方法。

fiber

• props state

• render 生成 vnode

• patch(ele, vnode)

• reconciliation 执行diff算法，纯js计算

  • 进行任务拆分
  • DOM需要渲染时暂停，空闲时恢复
  • window.requestIdleCallback

• commit 阶段，将diff结果渲染到dom中

react 性能优化

• 渲染列表key
• 及时销毁事件
• 合理使用异步组件
• 减少 bind 次数
• 合理使用 scu pure memo
• 合理使用 immutablejs
• 打包webpack优化
• 前端通用优化 图片懒加载等
• SSR

React 和 Vue 区别

1、共同

• 支持组件化
• 数据驱动视图
• vdom操作dom

2、不同

• React 使用 jsx 拥抱js（文件都是.js结尾），Vue使用模板拥抱html（文件是.vue结尾）
• React 函数式编程，Vue 声明式编程
• React 更多需要自力更生，Vue 把想要的都给你

Webpack

升级webpack5 级周边插件后。需要做的调整

• package.json的dev-server命令改了，

• 4: “dev”:”webpack-dev-server –config build/webpack.dev.js”

• 5: “dev”:”webpack serve –config build/webpack.dev.js”

• webpack-merge

• 4: const { smart } = require(‘webpack-merge’)

• 5: const { merge } = require(‘webpack-merge’)

• CleanWebpackplugin

• 4: const CleanWebpackplugin = require(‘clean-webpack-plugin’)

• 5: const { CleanWebpackplugin } = require(‘clean-webpack-plugin’)

• modules.rules

• 4: loader: [‘xxx-loader’]

• 5: use: [‘xxx-loader’]

• filename hash h小写

• 4: filename: ‘bundle.[contentHash:8].js’

• 5: filename: ‘bundle.[contenthash:8].js’

基本配置

• 拆分配置 和 merge
• 启动本地服务 webpack-dev-server
• 处理 ES6

modules.exports = {
    entry: path.join(srcPath, 'index'),
    modules: {
        rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader'],
                include: srcPath,
                exclude: /node_modules/
            }
        ]
    }
}

// .babelrc
{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

• 处理样式

• 处理图片

• file-loader 将图片变为url形式

• url-loader 将图片变为base64形式，减少http请求，很小没必要再进行http请求

• 模块化

高级配置

多入口

entry: {
    index: path.join(srcPath, 'index.js'),
    other: path.join(srcPath, 'other.js'),
},
output: {
    filename: '[name].[contentHash:8].js',
    path: distPath
}
plugins: [
    new HtmlWebpackPlugin({
        template: path.join(srcPath, 'index.html'),
        filename: 'index.html',
        chunks: ['index'] // 要引入什么js文件
    }),
    new HtmlWebpackPlugin({
        template: path.join(srcPath, 'other.html'),
        filename: 'other.html',
        chunks: ['other']
    })
]

抽离css文件

coonst MiniCssExtracctplugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsplugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: [
                    MiniCssExtracctplugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtracctplugin({
            filename: 'css/main.[contentHash:8].css'
        })
    ],
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCssAssetsplugin({})]
    }
}

压缩 optimization

const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsplugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    <!-- 其他配置 -->
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCssAssetsplugin({})]
    }
}

抽离公共代码

module.exports = {
    <!-- 其他配置 -->
    optimization: {
        minimizer: [],
        splitChunks: {
            // initial 不处理异步
            // async 只处理异步
            // all 全部
            chunks: 'all',
            cacheGroups: {
                // 引用关系 关联 HtmlWebpackPlugin chunks 配置
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高，有限抽离，重要！
                    test: /node_modules/, //
                    minSize: 0, // 大小限制，实际开发不要写0
                    minChunks: 1, // 最少复用过几次
                },
                 vendor: {
                    name: 'common', // chunk 名称
                    priority: 0, // 权限更高，有限抽离，重要！
                    minSize: 0, // 大小限制
                    minChunks: 2, // 最少复用过几次
                }
            }
        }
    }
}

异步加载

// 定义 chunk
import('./dynamic-data.js').then(res => {
    console.log(res.default.message)
})

module chunk bundle 区别

• module：就是写的代码，只要可以引入的都是module
• chunk：多模块合并成的，比如：index.js以及它引入的其他文件的集合
• bundle：最终的输出文件

性能优化，构建速度

• 优化babel-loader
• IgnorePlugin
• noParse
• happypack
• parallelUglifyPlugin
• 自动刷新
• 热更新
• DllPlugin

优化babel-loader

{
    test: /\.js$/,
    use: ['babel-loader?cacheDirectory'], // 开启缓存
    include: path.resolve(__dirname, 'src'), // 明确范围
    // 排除范围， 两者选一即可
    // exclude: path.resolve(__dirname, 'node_modules')
}

IgnorePlugin，直接不引入，代码中没有

// 不引入所有语言包
new webpack.IgnorePlugin(/\.\/locale/, /moment/)
// 手动引入中文
moment.locale('zh-cn')

noParse，引入，但不打包

modules.exports={
    module: {
        noParse: [/react\.min\.js/],
        rules: [
            {}
        ]
    }
}

happyPack 多线程打包

const HappyPack = require('happypack')

module.exports = {
    modules: {
        rules: [
            {
                test: /\.js$/,
                use: ['happypack/loader?id=babel'],
                include: srcPath
            }
        ]
    },
    plugins: [
        new Happypack({
            id: 'babel',
            loaders: ['babel-loader?cacheDirectory']
        })
    ]
}

ParallelUglifyPlugin 多进程压缩js

new ParallelUglifyPlugin({
    uglifyJS: {
        // 还是使用 uglifyjs 压缩，只是开启了多进程
        output: {
            beautify: false, // 最紧凑的输出
            comments: false // 删除所有注释
        },
        compress: {
            // 删除所有 console 语句，可兼容ie
            drop_console: true,
        }
    }
})

自动刷新

module.exports = {
    // 开启之后, webpack-dev-server 会自动开启刷新浏览器
    watch: true, // 默认false
    watchOptions: {
        ignored: /node_modules/, // 忽略
        aggregateTimeout: 300, // 监听变化后等300ms再执行,防止太快
        poll: 1000 // 每隔1000ms 询问一次
    }
}

DllPlugin

• 前端框架如 vue react ， 体积大，构建慢
• 较稳定，不常升级版本
• 同一个版本只构建一次即可，不用每次都重新构建
• webpack 内置
• 打包出dll文件
• DllReferencePlugin - 使用dll文件

1、打包dll配置 webpacl.dll.js

module.exports = {
 mode: 'development',

 entry: {
    // 把 React 相关模块的放到一个单独的动态链接库
    react: ['react', 'react-dom']
 },
 output: {
    filename: '[name].dll.js',
    path: distPath,
    library: '_dll_[name]'
 },
 plugins: [
    new DllPlugin({
      name: '_dll_[name]',
      path: path.join(distPath, '[name].mainfest.json'),
    })
 ]
}

2、修改index.html模板

添加

<script src="./react.dll.js"></script>

3、配置webpack.dev.js

moduls: {
 rules: [
    {
      test: /\.js$/,
      loader: ['babel-loader'],
      include: srcPath,
      exclude: /node_modules/  // 使用dll，所以不需要转换了
    }
 ]
},

plugins: [
 new DllReferencePlugin({
    mainfest: require(path.join(distPath, 'react.mainfest.json'))
 })
]

webpack 优化构建速度 （可用于生产环境）

• 优化 babel-loader
• IgnorePlugin
• noParse
• happyPack
• parellelUglifyPlugin

webpack 优化构建速度 （不可用于生产环境）

• 自动刷新
• 热更新
• DllPlugin

webpack性能优化 - 产出代码

• 体积更小

• 合理分包，不重复引用

• 速度更快，内损使用更少

• 小图片base64编码

• bundle + hash

• 懒加载 import 语法

• 提取公共代码 splitChunks

• IgnorePlugin

• cdn加速

• 使用 production

• Scope Hosting 改变打包作用域

使用 production

• 自动开启代码压缩
• Vue React 等会自动删除调试代码（如开发环境的warning）
• 启动 Tree-Shaking

Scope Hosting

• 代码体积更小
• 创建函数作用域更少
• 代码可读性更好

const ModuleConcatenationPlugin =
require('webpack/lib/optmize/ModuleConcatenationPlugin')

module.exports = {
 resolve: {
    // 针对npm中的第三方模块有限采用 jsnext:main 中指向的es6 模块化语法的文件
    mainFields: ['jsnext:main', 'browser', 'main']
 }，
 plugins: [
    // 开启 Scope Hosting
    new ModuleConcatenationPlugin()
 ]
}

babel

• 环境搭建 ， 基本配置

• .babelrc 配置

• presets 和 plugins

• babel-polyfill

• babel-runtime

// .babelrc
{
 "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltins": "usage", // 按需引入
        "corejs": 3 // 版本3
      }
    ]
 ],
 "plugins": []
}

babel-polyfill

• babel 7.4 之后弃用 babel-polyfill
• 推荐直接使用 core-js 和 regenerator

babel-polyfill 问题

• 污染全局环境，使用babel-runtime解决

.babelrc中

{
 "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
 ]
}