1 响应式数据

这玩意比较重要再提一嘴 可以去官网查看具体情况

1.1 ref

基本类型与数组对象的可响应式结构

1. 一般用作简单类型

<script setup>
    import { ref } from 'vue'
    const count =ref(0)
</script>

2. 模板中使用的时候不需要附加.value

<template>
    <div>
        this is home
        <About></About>
        <!-- 能够正常显示zhangsan -->
        <h1>{{ a.name }}</h1>
    </div>
</template>

<script setup>
import About from 'views/About.vue'

let a = ref({
    name: 'zhangsan',
    age: 14
});
</script>

3. 非顶级的ref不会解包

<template>
    <div>
        this is home
        <About></About>
        <!-- [object Object]1 -->
        <h1>{{ obj.id+1 }}</h1>
    </div>
</template>

<script setup>
import About from 'views/About.vue'
// obj是顶级属性, 但是obj下的id不是
let obj = {
    id: ref(0)
}
</script>

4. 顶级解包了的ref下的ref也会解包

虽然3中的情况并不能得到obj.id, 此时obj是一个对象, 但如果obj是一个ref, 则id也可以解包

<template>
    <div>
        this is home
        <About></About>
        <!-- 1 -->
        <h1>{{ obj.id+1 }}</h1>
    </div>
</template>

<script setup>
import About from 'views/About.vue'
let obj = ref({
    id: ref(0)
})
</script>

或者将obj解构出来, 成为一个顶级属性

<template>
    <div>
        this is home
        <About></About>
        <!-- 1 -->
        <h1>{{ id+1 }}</h1>
    </div>
</template>

<script setup>
import About from 'views/About.vue'
// obj是顶级属性, 但是obj下的id不是
let obj = {
    id: ref(0)
};
let { id } = obj;
</script>

注意, 这里obj的id能解构是因为obj并不是响应式数据, 而只是一个普通对象, 如果obj为响应式对象, 直接这样解构是不行的, 详见toRefs

5. 虽然非顶级ref不会被解包, , 不同于上述第三点时{{obj.id+1}}, 直接{{ obj.id }}仍可以访问

<template>
    <div>
        this is home
        <About></About>
        <!-- [object Object]1 -->
        <h1>{{ obj.id+1 }}</h1>
        <!-- 0 -->
        <h1>{{ obj.id }}</h1>
    </div>
</template>

<script setup>
import About from 'views/About.vue'
// obj是顶级属性, 但是obj下的id不是
let obj = {
    id: ref(0)
};
</script>

1.2 reactive

1. 只能对象类型如object, array, map等
2. 响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。
3. 当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包。

1.3 toRefs

ref解包使用, 如果ref直接解构是无效的

<template>
    <div>
        this is home
        <!-- 无效 -->
        <h1>{{ name }}</h1>
        <h1>{{ age }}</h1>
    </div>
</template>

<script setup>
let obj = ref({
    name: 'zhangsan',
    age: 14
})
let { name, age } = obj;
</script>

此时需要用到toRefs

2 生命周期

2.1 setup组合式api与选项式api的不同

没有beforeCreate和Created

与选项式api前面多个on

3 vue自动导入模块插件

ref 与 reactive等的使用都需要import先导入

import { ref, reactive } from 'vue'

这样很麻烦

3.1 使用unplugin-auto-import

此插件可以自动导入

3.1.1下载:

npm i unplugin-auto-import -D

3.1.2 配置:

vite.config.js中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path';

import AutoImport from 'unplugin-auto-import/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router']
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'views': path.resolve(__dirname, './src/views'),
      'components': path.resolve(__dirname, './src/components'),

    },
  },
})