初识vue第十篇

组合式API - 模版引用

1.模板引用的概念

通过ref标识获取真实的dom对象或者组件实例对象

2.如何使用（以获取dom为例 组件同理）

 

3.defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，

可以通过defineExpose编译宏指定哪些属性和方法允许访问

 组合式API - provide和inject

1.作用和场景

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

 

2.跨层传递普通数据

a 顶层组件通过provide函数提供数据

b. 底层组件通过inject函数获取数据

3.跨层传递响应式数据

在调用provide函数时，第二个参数设置为ref对象

 

4.跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据

  

Vue3.3新特性-defineOptions 

1.背景说明：

有 <script setup> 之前，如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。

但是用了 <script setup> 后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。

为了解决这一问题，引入了 defineProps 与 defineEmits 这两个宏。但这只解决了 props 与 emits 这两个属性。

如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的 <script> 标签。

这样就会存在两个 <script> 标签。让人无法接受。

 

Vue3.3新特性-defineModel 

在 Vue3 中，自定义组件上使用 v-model, 相当于传递一个 modelValue 属性，同时触发 update:modelValue 事件

大事件项目介绍 和 创建 

1.pnpm 包管理器 - 创建项目

一些优势：比同类工具快2倍左右、节省磁盘空间... https://www.pnpm.cn/

安装方式：npm install -g pnpm

创建项目：pnpm create vue

 

Eslint 配置代码风格 

1.Eslint 配置代码风格

配置文件 .eslintrc.cjs

1. prettier 风格配置 https://prettier.io

1. 单引号

2. 不使用分号

3. 宽度80字符

4. 不加对象|数组最后逗号

5. 换行符号不限制（win mac 不一致）

2. vue组件名称多单词组成（忽略index.vue）

3. props解构（关闭）

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  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 解构的校验 (props解构丢失响应式)
    // 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  },
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

配置代码检查工作流

1.提交前做代码检查

1. 初始化 git 仓库，执行 git init 即可

2. 初始化 husky 工具配置，执行 pnpm dlx husky-init && pnpm install 即可

3. 修改 .husky/pre-commit 文件

vue-router4 路由代码解析

 Pinia 构建仓库 和 持久化