vue3学习(更新中)

创建一个vue应用

npm create vue@latest

编写APP组件

main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

APP.vue

<template>
  <div class="app">
    app
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

setup

<template>
   <div>{{ name }}</div>
</template>

<script lang="ts" setup name="Person2">
   const name = 'zhangsan'
</script>

name="Person2"需要安装下面的插件

插件
npm i vite-plugin-vue-setup-extend -d
在这里插入图片描述

ref和reactive

ref

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回

1、创建基本类型的响应式数据

import { ref } from 'vue'
const name = ref('zhangsan')

2、创建对象类型的响应式数据

<template>
   <div>{{ info.name }}</div>
   <button @click="change">修改</button>
</template>

<script lang="ts" setup name="Person2">
import { ref } from 'vue'
const info = ref({
   name: 'aaa'
})
function change () {
   info.value.name = 'bbb'
}
</script>

reactive

只能创建对象类型的响应式数据

<template>
   <div>{{ info.name }}</div>
   <button @click="change">修改</button>
</template>

<script lang="ts" setup name="Person2">
import { reactive } from 'vue'
const info = reactive({
   name: 'aaa'
})
function change () {
   info.name = 'bbb'
}
</script>

toRefs和toRef

toRefs

toRefs用来把响应式对象转换成普通对象，把对象中的每一个属性，包裹成ref对象

<template>
   <div>{{ info.name }}</div>
   <div>{{ age }}</div>
   <button @click="change">修改</button>
</template>

<script lang="ts" setup name="Person2">
import { reactive, toRefs } from 'vue'
const info = reactive({
   name: 'aaa',
   age: 18
})
let { name, age } = toRefs(info)
function change () {
   name.value = 'bbb'
   age.value = 19
}
</script>

toRef

将响应式对象中的所有属性转换为单独的响应式数据，对象成为普通对象

<template>
   <div>{{ info.name }}</div>
   <button @click="change">修改</button>
</template>

<script lang="ts" setup name="Person2">
import { reactive, toRef } from 'vue'
const info = reactive({
   name: 'aaa',
   age: 18
})
let name = toRef(info, 'name')
function change () {
   name.value = 'bbb'
}
</script>

computed

<template>
   <input type="text" v-model="firstName">
   <input type="text" v-model="lastName">
   <div>{{ fullName }}</div>
</template>

<script lang="ts" setup name="Person2">
import { computed, ref } from 'vue'
let firstName = ref('zhang')
let lastName = ref('san')
// 只读
// let fullName = computed(() => {
//    return firstName.value + lastName.value
// })
// 可读可写
let fullName = computed({
   get() {
      return firstName.value + lastName.value
   },
   set (val) {
      const [ str1, str2 ] = val.split('-')
      firstName.value = str1
      lastName.value = str2
   }
})
fullName.value = 'li-si'
</script>

watch和watchEffect

watch监听一下四种数据
1、ref定义的数据
2、reactive定义的数据
3、函数返回一个值（getter函数）
4、一个包含上述内容的数组

<template>
   <div>{{ sum }}</div>
   <button @click="changeSum">修改</button>
</template>

<script lang="ts" setup name="Person2">
import { ref, watch } from 'vue'
let sum = ref(0)
function changeSum () {
   sum.value += 1
}
const stopWatch = watch(sum, (newVal) => {
   console.log('sum变化了', newVal)
   // 停止监视
   if (newVal === 5) {
      stopWatch()
   }
})
</script>

<template>
   <div>{{ info.name }}</div>
   <button @click="change1">修改属性值</button>
   <button @click="change2">修改整个对象</button>
</template>

<script lang="ts" setup name="Person2">
import { ref, watch } from 'vue'
let info = ref({
   name: 'zhangsan'
})
function change1 () {
   info.value.name = 'lisi'
}
function change2 () {
   info.value = { name: 'lisi' }
}
// deep 监视属性值的变化 immediate 立即执行
watch(info, (newVal) => {
   console.log(newVal)
}, { deep: true, immediate: true })
</script>

<template>
   <div>{{ info.name }}</div>
   <button @click="change1">修改属性值</button>
   <button @click="change2">修改整个对象</button>
</template>

<script lang="ts" setup name="Person2">
import { reactive, watch } from 'vue'
let info = reactive({
   name: 'zhangsan'
})
function change1 () {
   info.name = 'lisi'
}
function change2 () {
   info = Object.assign(info, { name: 'wangwu' })
}
// reactive定义的对象类型数据，默认开启深度监视且不可关闭
watch(info, (newVal) => {
   console.log(newVal)
})
</script>

<template>
   <div>{{ info.name }}</div>
   <button @click="change1">修改1</button>
   <button @click="change2">修改2</button>
</template>

<script lang="ts" setup name="Person2">
import { reactive, watch } from 'vue'
let info = reactive({
   name: 'zhangsan',
   age: 18
})
function change1 () {
   info.name = 'lisi'
}
function change2 () {
   info.age = 19
}
watch(() => info.age, (newVal) => {
   console.log(newVal)
})

watch([() => info.age, () => info.name], (newVal) => {
   console.log(newVal)
})

watchEffect

watchEffect(() => {
   console.log(info.name)
})

watch和watchEffect都能监视响应式数据的变化，不同的是监听数据变化的方式不同。
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

标签的ref属性

如果用于普通 DOM 元素，引用将是元素本身；如果用于子组件，引用将是子组件的实例

<template>
   <h1 ref="title">nihao</h1>
   <button @click="showLog">点击</button>
</template>

<script lang="ts" setup name="Person2">
import { ref, defineExpose } from 'vue'
const title = ref()
const a = ref(0)
function showLog() {
   console.log(title.value)
}
// 默认不会暴露任何在 <script setup> 中声明的绑定，使用efineExpose暴露出去，父组件可访问
defineExpose({ a })
</script>

ts接口范型-自定义类型

// 定义一个接口，用于限制person对象的具体属性
export interface PersonInter {
  id: string,
  name: string,
  age: number
}

// 一个自定义类型
// export type Persons = Array<PersonInter>
export type Persons = PersonInter[]

使用

<script lang="ts" setup name="Person2">
import { reactive } from 'vue'
import { type Persons } from '../types'
const personList = reactive<Persons>([
   { id: '1', name: '张三', age: 18 }
])
console.log(personList)
</script>

props的使用

<template>
  <div class="app">
    <Person :list="personList"/>
  </div>
</template>

<script lang="ts" setup name="App">
import Person from './components/TestPerson.vue'
import { reactive } from 'vue'
import { type Persons } from './types'
const personList = reactive<Persons>([
   { id: '1', name: '张三', age: 18 }
])
</script>

<script lang="ts" setup name="Person2">
import { defineProps } from 'vue'
import type { Persons } from '../types';
// 只接收list
//  const props =  defineProps(['list'])
//  console.log(props)

// 接收list + 限制类型
//  defineProps<{ list: Persons }>()

//  接收list + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{list?:Persons}>(), {
   list: () => [{ id: '1', name: 'aa', age: 18 }]
})
</script>

生命周期

1、setup() : 开始创建组件

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 若组件实例是缓存树的一部分，当组件被插入到 DOM 中时调用；

9、onDeactivated(): 若组件实例是缓存树的一部分，当组件从 DOM 中被移除时调用；

10、onErrorCaptured(): 在捕获了后代组件传递的错误时调用。

pina

搭建pina环境

// 第一步：引入pinia
import { createPinia } from 'pinia'
const app = createApp(App)
// 第二步：创建pinia
const pinia = createPinia()
// 第三步: 安装pinia
app.use(pinia)