Vue3学习（仅为了记录，参考意义不大）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3学习（仅为了记录，参考意义不大）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.Vue3介绍

1.Vue3的优势

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

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

vue-cli是创建vue2.0的脚手架工具，create-vue是创建vue3的脚手架工具，create-vue构建速度非常快
Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

3.vue3项目目录和关键文件

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

二.Vue3组合式API

1.setup选项

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

setup语法糖：

总结：

2.reactive和ref函数

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

3.computed

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

4.watch

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

开启深度监听同样的写法

5.生命周期函数

beforeUnmount和unmounted对应beforeDestoryed和destoryed
Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

6.父子同信

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js
defineProps原理还是props，只不过在setup里面可以去接收使用

7.模板引用和defineExpose宏函数

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

8.provide和inject

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

三.Vue3.3新特性

1.defineOptions

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

2.defineModel

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js
父组件里面写v-model，子组件里defineModel

四.Pinia

1.什么是pinia

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

2.在项目中添加pinia

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js
pinia官网：https://pinia.vuejs.org/zh/introduction.html

3.基本语法

（推荐组合式API写法）
Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

4.action异步写法

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

5.storeToRefs方法

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

6.pinia持久化

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js
官网地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

其它配置可以查阅官网

五.大事件项目

1.pnpm

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

2.eslint和prettier

Vue3学习（仅为了记录，参考意义不大）,vue课程笔记,前端,vue,vue.js

  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'
  }