vue3学习笔记

js中写的方法都要用export default 抛出

1组件注册

使用

组件命名规则：驼峰式命名

动态组件

关键字： is

2-1creative创造数据

reactive 和 ref 都是响应式数据

在用 reacive 来创造数据时，需要将return 时 要用 …toRefs(data) 将data里面的数据修改为响应式数据

2-2 ref

获取动态的dom节点 或者组件实例

1 获取普通的dom节点

<div>
<p ref="sendP">今天又是高斯宠武藏的一天</p>
<div>

因为setup 中,dom元素还没有被创建，所以要配合onMounted，才可以获取到节点

import { onMounted，ref} from 'vue'
const sendP = ref(null)
onMounted(()=>{
    console.log("sendP.value",sendP.value);
})

打印结果

2 获取子组件的实例

注意：需要在子组件中，在子组件中将要给父组件的数据暴露出去， defineExpose

defineExpose({
    msg
})

ref 也可以定义变量

3-1.props 父向子传值

props用defineProps来声明

props校验

defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propG: {
    type: Function,
    // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})

props单项数据流

父组件跟新后，子组件的props都会跟新，不要直接在props中修改数据

操作修改props的两种方式

1 reactive

2 计算属性

3-2-1 祖孙传值 provide/inject

父组件使用
import {provide} from 'vue'
import axios from 'axios'
provide('axios',axios)

子孙组件 接收
import {inject} from 'vue'
let $axios = inject('axios')

3-2$emit子向父传值

子组件1

4路由

router

1.导入

import { useRouter } from 'vue-router'

2.激活

 const router = useRouter()

route

1.导入

import { useRoute } from 'vue-router'

2.激活

 const route = useRoute()

3.路由传值

3-1 query
3-2 params

4-2vuex

import { useStore } from 'vuex'
const store = useStore()

向 vuex states 中保存数据

store.commit('方法名',data)

5透传

继承合并

如果不希望组件继承属性和方法时 使用 inheritAttrs: false 来禁止

6插槽

具名插槽

7全局挂在与使用

1.全局挂在

app.config.globalProperties.$axios = axios

2.全局使用

import { getCurrentInstance  } from 'vue';
const {proxy} = getCurrentInstance()
vue3 全局挂在的方法 在 proxy 中查找  proxy 代替了this

8自定义指令

app.directive

全局挂在自定义指令

// main.js
import Vfixed from ......
app.directive('fixed',Vfixed)

使用

<p v-fixed>啦啦啦</p>

注册一个全局组件

9内置组件

制作基于状态变化的过渡和动画：

Transition

TransitionGroup

keepAlive 可以缓存组件

10vue3的生命周期

setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : 组件挂载到节点上之前执行的函数； 此时，dom还没有创建完成
onMounted() : 组件挂载完成后执行的函数；
onBeforeUpdate(): 组件更新之前执行的函数；
onUpdated(): 组件更新完成之后执行的函数；
onBeforeUnmount(): 组件卸载之前执行的函数；
onUnmounted(): 组件卸载完成后执行的函数；
onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数

vue3的生命周期响应的比vue2的更快

12-1 toRefs响应式数据

将data中的每个属性都执行原始对象响应属性的ref ，使其变为响应式数据

( 这么操作的原因，es6 j解构赋值操作，对一个响应式对象直接解构时，解构后的数据不在有响应式，而toRefs解决了这一个问题)

12-2 ref

ref 定义的都是响应式数据

这里是ref的第二种用法，定义变量，

由ref定义的变量，使用时，必须 .value 来获取

12-3 toRef

创建一个ref 对象 ，其 value 值指向另外一个对象的某个属性，一个ref只能修改一个对象的属性，而toRefs可以修改整个对象

语法 const name = toRef(name,"泽塔“)

因为 toRef 和 toRefs 都会返回一个 ref 对象 所以在 js 中调用他们时，需要使用 .value

13 readyonly 只读复制

复制 data 但只能进行读操作，无法进行写操作

14-1 watch 侦听器

第一个参数 要监听的数值(依赖项)

第二个参数 依赖的数据发送变化后执行的函数

第三个参数 是一个对象

​ immediate 在创建侦听器时立即触发回调函数，第一次调用时旧值是 undefined

​ deep 是否开启深度监听

​ flush 调整回调函数的刷新时机

​ onTrack/onTrigger 调试侦听器的依赖 ???

关闭 watch

在需要关闭侦听器的地点再次调用侦听器就好了

14-2 watchEffect

消除副作用？？？

15 vue3+ts实战

一 下载 element-ui

 yarn add element-plus

全局注册组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)

二 正文

1 defineComponent

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uoWLbNPH-1684060102938)(Img/image-20221201105115249.png)]

2 element-plus 样式穿透

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aMwt2M0U-1684060102938)(Img/image-20221201110135304.png)]

16-input输入框

在获取input 节点后，

inputRef.value.focus() 可以让input输入框自动的获取节点

17 Pinia

安装

yarn add pinia
# 或者使用 npm
npm install pinia

配置根存储

import { createPinia } from 'pinia'

app.use(createPinia())

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
  // 推荐使用 完整类型推断的箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  getters: {
      // 自动将返回类型推断为数字
    doubleCount(state) {
      return state.counter * 2
    },
    // 返回类型必须明确设置
    doublePlusOne(): number {
      return this.counter * 2 + 1
    },
  },
  actions: {  // action 是异步操作
    increment() {
      this.counter++
    },
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // 让表单组件显示错误
        return error
      }
    },
  },
})

使用

import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()
    // `name` 和 `doubleCount` 是响应式引用
    // 这也会为插件添加的属性创建引用
    // 但跳过任何 action 或 非响应式（不是 ref/reactive）的属性
    const { name, doubleCount } = storeToRefs(store)

    return {
      name,
      doubleCount
    }
  },
})

可以在获取后，直接对它进行操作

const store = useStore()

store.counter++

重置

const store = useStore()

store.$reset()

改变状态

有两种方法

1 直接通过 store 在页面中修改

2 使用$patch 方法修改

store.$patch({
  counter: store.counter + 1,
  name: 'Abalam',
})

替换

1.为新对象来替换 Store 的整个状态

store.$state = { counter: 666, name: 'Paimon' }

2.也可以用pinia 实例的 state 来替换应用程序的整个状态

pinia 实例的 state 来替换应用程序的整个状态

订阅状态

cartStore.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  mutation.type // 'direct' | 'patch object' | 'patch function'
  // 与 cartStore.$id 相同
  mutation.storeId // 'cart'
  // 仅适用于 mutation.type === 'patch object'
  mutation.payload // 补丁对象传递给 to cartStore.$patch()

  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem('cart', JSON.stringify(state))
})

getters 的访问

可以直接在 store 实例上访问 getter

<script>
export default {
  setup() {
    const store = useStore()
    return { getUserById: store.getUserById }
  },
}
</script>

数据持久化

使用 插件

pinia-plugin-persist

下载

pnpm install pinia-plugin-persist --save

mian.ts 配置文件

使用

简单使用

persist 配置

// 开启数据缓存
  persist: {
    enabled: true,
    strategies: [
      {
        // 自定义名称
        key: 'login_store',
        // 保存位置，默认保存在sessionStorage
        storage: localStorage,
        // 指定要持久化的数据，默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
        paths: ['age'],
      },
    ],
  },

e()
return { getUserById: store.getUserById }
},
}

##### 数据持久化

使用 插件

`pinia-plugin-persist`

下载

> pnpm install pinia-plugin-persist --save



mian.ts 配置文件

[外链图片转存中...(img-dwv9GhLj-1684060102939)]

`使用`



简单使用

[外链图片转存中...(img-CChmabf2-1684060102939)]

persist 配置

// 开启数据缓存
persist: {
enabled: true,
strategies: [
{
// 自定义名称
key: ‘login_store’,
// 保存位置，默认保存在sessionStorage
storage: localStorage,
// 指定要持久化的数据，默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
paths: [‘age’],
},
],
},