06-vue第六天学习笔记

1. vue3的新特性

1. 更容易维护：组合式API，更好的ts支持
2. 更快的速度：重写diff算法，模板编译优化，更高效的组件初始化
3. 更小的体积：良好的TreeSharking,按需导入
4. 更好的数据响应式：proxy

1.1 组合式API

1. setup选项

   1. vue3为了方便组合式Api模式下数据，函数等的使用，提供setup选项，使得可以数据直接在模板中调用
   2. setup的执行时间比beforecreate的还早
   3. setup中没有this，指向undefined

2. reactive和ref

   1. reactive()函数接收对象类型数据的参数，并返回一个响应式的对象
   2. ref()函数接收简单类型或对象类型数据的参数，并返回一个响应式的对象。ref()函数底层是将参数包进对象中，在通过reactive函数进行使用

3. computed计算属性

   1. 与vue2中的原理相同，只是写法不同

   const computedList = computed(() => {})
   

   2. 计算属性中不能进行异步请求或者修改dom等
   3. 应当避免直接修改计算属性

4. watch侦听器

   1. 与vue2中的原理相同，只是写法不同

   <script setup>
      import { ref, watch } from 'vue'
      const count = ref(0)
      const nickname = ref('张三')
   
      const changeCount = () => {
         count.value++
      }
      const changeNickname = () => {
         nickname.value = '李四'
      }
   
      // 1. 监视单个数据的变化
      //    watch(ref对象, (newValue, oldValue) => { ... })
      // watch(count, (newValue, oldValue) => {
      //   console.log(newValue, oldValue)
      // })
   
      // 2. 监视多个数据的变化
      //    watch([ref对象1, ref对象2], (newArr, oldArr) => { ... })
      // watch([count, nickname], (newArr, oldArr) => {
      //   console.log(newArr, oldArr)
      // })
   
      // 3. immediate 立刻执行
      // watch(count, (newValue, oldValue) => {
      //   console.log(newValue, oldValue)
      // }, {
      //   immediate: true
      // })
      // --------------------------------------------
      // 4. deep 深度监视, 默认 watch 进行的是 浅层监视
      //    const ref1 = ref(简单类型) 可以直接监视
      //    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
      const userInfo = ref({
         name: 'zs',
         age: 18
      })
      const setUserInfo = () => {
      // 修改了 userInfo.value 修改了对象的地址，才能监视到
      // userInfo.value = { name: 'ls', age: 50 }
         userInfo.value.age++
      }
   
      // deep 深度监视
      // watch(userInfo, (newValue) => {
      //   console.log(newValue)
      // }, {
      //   deep: true
      // })
   
      // 5. 对于对象中的单个属性，进行监视
      watch(() => userInfo.value.age, (newValue, oldValue) => {
         console.log(newValue, oldValue)
      })
   </script>
   

5. 生命周期

选项式API	组合式API
beforeCreate/created	setup
beforeMount/mounted	onBeforeMount/onMounted
beforeUpdate/updated	onBeforeUpdate/onUpdate
beforeUnmount/unmounted	onBeforeUnmount/onUnmounted

6. 父子组件通信

// App.vue
<script setup>
import { ref } from 'vue';
import SonVue from './components/SonVue.vue';
const money = ref(100)
const change = (newvalue) => {
  money.value = newvalue
}
</script>

<template>
  <div class="dad">父组件-{{ money }}</div>
  <SonVue :money="money" @change-money="change"></SonVue>
</template>

<style scoped>

</style>

// SonVue.vue
<script setup>
    defineProps({
        money: Number
    })
    const emit = defineEmits(['changeMoney'])
    const buy = () => {
        emit('changeMoney', 5)
    }
</script>

<template>
  <div class="box">我是子组件-{{ money }}</div>
  <button @click="buy">花钱</button>
</template>

<style scoped>
.box {
    width: 200px;
    height: 20px;
    border: 1px solid black;
    padding: 10px;
}
</style>

7. 模板引用

// 1. 获取dom
// 定义ref对象
const money = ref(null)
// 绑定dom元素
<input type="text" ref="money"/>

// 2.获取组件
// 定义ref对象
const test = ref(null)
// 绑定组件实例
<SonVue ref="test"></SonVue>
// 在子组件中暴漏属性和方法
   defineExpose({
      num
   })
// 在父组件中使用
onMounted(() => {
  console.log(test.value.num)
})

8. 跨层级传递数据(provide和inject)

   <!-- 1. 传递普通数据    -->
   // 父组件
   provide('数据名', 普通数据)
   //子组件
   inject('数据名')
   
   <!-- 2. 传递响应式数据    -->
   // 父组件
   provide('数据名', ref对象)
   //子组件
   inject('数据名')
   
   <!-- 3. 传递函数——父组件可以向子组件传递函数，从而子组件可以通过函数修改父组件的值  -->
   // 父组件
   provide('函数名', 函数体)
   //子组件
   inject('函数名')
   

9. vue3.3新特性

   1. defineOptons:用来配置Options API的配置项。
   2. defineModel: 同来简化v-model的绑定过程

1.2 pinia

1. pinia是vue最新的状态管理工具，是vuex的替代品

2. 与vuex的区别：

   1. 去掉了mutations，从而提供actions支持同步也支持异步
   2. 提供符合组合式风格的API，可以将数据，函数，计算属性放在一起
   3. 去掉了modules模块的概念，使每一个store都是独立的模块，不再需要使用命名空间
   4. 更好的TS支持

3. pinia基础语法

import {defineStore} from 'pinia'
import { ref } from 'vue'

export const useTestStore = defineStore('test', () => {
    // 声明数据
    const money = ref(0)

    // 声明方法
    const changeMoney = () => {
        money.value += 10
    }
    const subMoney = () => {
        money.value -= 10
    }
    // 声明计算属性
    ...
    // 暴露数据，方法等
    return {
        money,
        changeMoney,
        subMoney
    }
},{
   // 使用插件进行数据持久化，可以自定义配置，true代表使用默认配置
   persist: true
})

// 导入使用
<script setup>
// 导入store模块中的方法
import { useTestStore } from '@/store/test'
//模块中的数据不能直接结构，需要使用storeToRefs方法
import { storeToRefs } from 'pinia';
const {money} = storeToRefs(useTestStore())
//actions方法可以直接结构
const { subMoney } = useTestStore()
</script>

<template>
<div>son1组件——{{ money }}</div>
<button @click="subMoney">花钱</button>
</template>

<style scoped>

</style>