文稿.md

1. 前端框架的好处

   1. 组件化：高度的组件化可以使我们的工程==易于维护==，易于==组合拓展==
   2. 生态：工具链和UI库都有成熟的解决方案
   3. …

2. 简述前端主流框架

   前端框架

   1. React
   2. Vue
   3. Angular
   4. Svelte
   5. Solid
   6. Ember
   7. …

   NodeJS后端框架

   1. NestJs
   2. Express
   3. Koa
   4. …

   全栈开发框架

   1. Nextjs
   2. Nuxtjs
   3. Remix
   4. …

   跨平台开发框架

   1. React Native
   2. Flutter
   3. Electron
   4. Tauri
   5. Taro
   6. Weex
   7. Uniapp
   8. …
   • React ==Class Components== => ==React Hooks==

   import { Component } from 'react'
   
   class ExampleClass extends Component {
     constructor(props) {
       super(props)
       this.state = {
         count: 1
       }
     }
       
     handleClick = () => {
       let { count } = this.state
       this.setState({
         count: count+1
       })
     }
       
     render() {
       const { count } = this.state
       return (
         <div>
           <p>you click { count }</p>
           <button onClick={this.handleClick}>点击</button>
         </div>
       )
     }
   }

   import { useEffect, useState } from 'react'
   
   function usePosition() {
     const [x, setX] = useState(0)
     const [y, setY] = useState(0)
   
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e
       setX(clientX)
       setY(clientY)
     } 
   
     useEffect(() => {
       document.addEventListener('mousemove', handleMouseMove)
       return () => {
         document.removeEventListener('mousemove', handleMouseMove)
       }
     })
     return [
       {x, y}
     ]
   }

   // 使用
   function Index() {
     const [position] = usePosition()
     return(
       <div>
         <p>x:{position.x},y:{position.y}</p>
       </div>
     )
   }

   可以很明显的看出使用hooks对逻辑复用更加的方便，使用的时候逻辑也更加清晰，Vue3 Composition API（组合式API）就是受此影响诞生的

3. 技术栈

   路由管理库： Vue-router

   状态管理库： Pinia、 Vuex

   UI框架：Element Plus、Ant Design Vue、Quasar、Vuetify、Naive UI、Prime Vue

   移动端： Ionic、Vant、Varlet、NutUI、WaveUI

   构建工具：Vite、VueCli、Webpack

   工具库： VueUse、unplugin-vue-components、vuex-persistedstate、pinia-plugin-persistedstate、

   vue-cropper、vue-print-nb、vue-multiselect-next…

   调试工具：Vue Devtools

   单测工具：Vitest、Jest

4. Vue2 & 3 的区别

   1. 兼容性：Vue2不兼容IE8及以下的版本，Vue3不兼容IE

   2. Vue3依然可以使用大部分optionsAPI

      1. Vue3对比Vue2具有明显的性能提升
         • 打包大小减少41%
         • 初次渲染快55%，更新快133%
         • 内存使用减少54%
      2. Vue3具有的composition API实现逻辑模块化和重用

   3. Object.defineProperty 和 Proxy

   4. Vue2响应式缺点

      1. 无法检测对象属性的添加或移除。
      2. 无法检测按索引更新数组

   5. 单节点多节点

   6. 视图更新

   7. mixins和hooks

      1. mixins不清晰数据来源，同名会被覆盖，mixins之前数据流动不明，很难排查
      2. hooks更清晰，不会出现冲突问题

   8. 生命周期

      beforeCreate -> setup()
      
      created -> setup()
      
      beforeMount -> onBeforeMount
      
      mounted -> onMounted
      
      beforeUpdate -> onBeforeUpdate
      
      updated -> onUpdated
      
      beforeDestroy -> onBeforeUnmount
      
      destroyed -> onUnmounted

   9. attrs 和 listeners （privide inject）