Vue3学习（仅为了记录，参考意义不大）

news/2024/7/10 2:30:03 标签: 前端, vue, vue.js

一.Vue3介绍

1.Vue3的优势

在这里插入图片描述

vue vue3_4">2.使用create-vue创建vue3项目

vue-cli是创建vue2.0的脚手架工具，create-vue是创建vue3的脚手架工具，create-vue构建速度非常快
在这里插入图片描述

vue3_8">3.vue3项目目录和关键文件

在这里插入图片描述

二.Vue3组合式API

1.setup选项

在这里插入图片描述

setup语法糖：

总结：

2.reactive和ref函数

在这里插入图片描述

3.computed

在这里插入图片描述

4.watch

在这里插入图片描述

开启深度监听同样的写法

5.生命周期函数

beforeUnmount和unmounted对应beforeDestoryed和destoryed
在这里插入图片描述

6.父子同信

在这里插入图片描述
defineProps原理还是props，只不过在setup里面可以去接收使用

7.模板引用和defineExpose宏函数

在这里插入图片描述

8.provide和inject

在这里插入图片描述

三.Vue3.3新特性

1.defineOptions

在这里插入图片描述

2.defineModel

在这里插入图片描述
父组件里面写v-model，子组件里defineModel

四.Pinia

1.什么是pinia

在这里插入图片描述

2.在项目中添加pinia

在这里插入图片描述
pinia官网：https://pinia.vuejs.org/zh/introduction.html

3.基本语法

（推荐组合式API写法）
在这里插入图片描述

4.action异步写法

在这里插入图片描述

5.storeToRefs方法

直接解构，不处理，数据会丢失响应式原因：
store 是一个用 reactive 包装的对象，这意味着不需要在后面写 .value
reactive实现响应式，底层的原理是proxy，而proxy是针对对象进行劫持（整个关于数据的劫持监听，都是针对于对象的）
那么就意味着，只要对象在，对象里面的所有属性以及对象的子属性都能够监视到当前数据的修改
但是一旦使用了解构，解构意味着声明了两个变量（count, msg），两个变量分别去存了对象里的两个值（值a和值b分别赋值到了count和msg变量里）
一旦赋值完成，这两个变量跟原来的响应式变量就无关了(相当于拷贝了一份数据丢到外面去了)，所以丢失了响应式
为了从 store 中提取属性时保持其响应性，需要使用 storeToRefs()
使用场景：storeToRefs一般在数据很多的时候写，避免出现counterStore.XXX太多
在这里插入图片描述

6.pinia持久化

在这里插入图片描述
官网地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

其它配置可以查阅官网

五.大事件项目

1.pnpm

在这里插入图片描述

2.eslint和prettier

在这里插入图片描述

  rules: {
    // prettier专注代码美观（格式化工具）
    // 1. 禁用prettier插件，并且关闭format on save
    // 2.安装Eslint插件，并配置保存时自动修复
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printwidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endofLine: 'auto' // 换行符号不限制 (win mac 不一致)
      }
    ],
    // eslint关注于规范
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成 (忽略index.vue)
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 添加未定义变量错误提示true,create-vue@3.6.3 关闭true,这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }