Vue3学习总结

1、Vue3的优点

• 首次染更快
• diff 算法更快
• 内存占用更少
• 打包体积更小
• 更好的 Typescript 支持
• Composition API 组合API （可复用 可维护）

2、webpack和vite的区别

• webpack：需要查找依赖，打包所有的模块，然后才能提供服务，更新速度会随着代码体积增加越来越慢
• vite：使用原生 ESModule 通过 script 标签动态导入，访问页面的时候加载到对应模块编译并响应

3、vite创建项目

    // 运行创建项目命令
    
    # 使用npm
    npm create vite@latest
    # 使用yarn
    yarn create vite
    # 使用pnpm
    pnpm create vite
    
    // 输入项目名称，默认vite-project
    Project name: vite-name
    
    // 选择前端框架
    // 选择项目类型
    // 创建完毕
    cd vite-vue3
    npm install 
    npm run dev

4、组合式

• vue3中两种组织代码逻辑的写法：
  • 通过data、methods、watch 等配置选项组织代码逻辑是选项式API写法
  • 所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是组合式API写法

5、reactive函数 定义复杂类型的响应式数据

• 使用步骤
  • 从vue中导出reactive函数
  • 在setup函数中，使用reactive函数，传入一个普通对象，返回一个响应式数据对象
  • 最后setuo函数返回一个对象，包含该响应式对象即可，模板中可使用

6、ref函数：通常使用它定义响应式数据，不限类型

• 参数是任意类型不限类型(可以是对象可以是简单数据
• 返回值响应式数据(对象)
• template中不需要.value 模板中自动解套

7、setup语法糖—简化setup固定套路代码，让代码更简洁

// 语法糖形式

// 非语法糖形式

8、computed函数：定义计算属性

• 从vue中导出computed函数
• 在setup

9、watch：监听数据的变化

• 使用 watch 监听一个响应式数据
• 使用 watch 监听多个响应式数据
• 使用 watch 监听响应式对象数据中的一个属性(简单)
• 使用 watch 监听响应式对象数据中的一个属性(复杂)，配置深度监听
• 使用 watch 监听，配置默认执行

10、生命周期函数

使用步骤：

• 先从vue中导入以on打头的生命周期钩子函数
• 在setup函数中调用生命周期函数并传入回调函数
• 生命周期钩子函数可以调用多次

ref获取DOM元素

    <div ref="comeOn">来啊，改我啊</div>

    <script setup>
      import { onMounted, ref } from 'vue';
      const comeOn = ref(null)
      onMounted(() => {
        setTimeout(() => {
          comeOn.value.innerHTML = '你变了'
        }, 1000);
      })
    </script>