vue3知识总结-5

文章目录

• • vue3知识总结-5
  • Setup
  • Reactive 和ref函数
  • • reactive
    • Ref
    • computed计算属性函数
    • watch函数
    • • 基本使用和立即执行
      • Deep深度侦听
      • 生命周期函数
      • 父子通信
      • • 父传子
        • 子传父
        • 模版引用
        • Provide 和inject
        • Pinia
        • • 添加pinia到Vue项目
          • conter基础使用
          • getters实现

            在之前的内容中有很多的，是关于Vue2的配置，组合式和选择式api需要都会，下面主要的就是一些新特性的总结，总体看完之后，就是基本上，可以理解清楚，是怎么样的，然后后面底层的肯定是需要深度剖析的。基本的基础知识就到这里。

            Setup

            
            -->
            -->
            
            
            -->
            
            
            -->
            
            
            
            
            -->
            
            
            
            
            
            

            Reactive 和ref函数

            reactive

            作用：接受对象类型数据的参数传入并返回一个响应式的对象

            Ref

            作用：接受简单类型或者对象类型的数据传入并且返回一个响应式的对象

            computed计算属性函数

            计算属性基本思想和Vue2的完全一致，组合式API的计算属性只是修改了写法

            watch函数

            基本使用和立即执行

            作用：侦听一个或者多个数据的变化

            导入watch函数

            执行watch函数传入要侦听的响应式数据和回调函数

            下面是侦听单个数据的

            多个数据的监听

            Immediate: 侦听器创建的时候，立即触发回调，响应式数据变化之后继续执行回调

            Deep深度侦听

            watch是ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

            也可以有精确的侦听。

            生命周期函数

            父子通信

            父传子

            • 父组件给子组件绑定属性
            • 子组件内部通过props选项接受

              子传父

              • 父组件中给子组件标签通过@绑定事件
              • 子组件内部通过$emit方法触发事件

                模版引用

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

                如何使用

                • 调用ref函数生成一个ref对象
                • 通过ref标识绑定ref对象到标签

                  defineExpose()

                  制定那些属性和方法允许访问，然后暴露给父组件

                  Provide 和inject

                  作用和场景

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

                  跨层传递普通数据

                  • 顶层组件通过provide函数提供数据
                  • 底层组件通过inject函数获取数据

                    Pinia

                    添加pinia到Vue项目

                    Pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替代品

                    1. 提供更加简单的API
                    2. 提供符合组合式风格的API
                    3. 去掉了modules的概念，每一个store都是一个独立的模块
                    4. 搭配TypeScript一起使用提供可靠的类型推断

                    import './assets/main.css'
                    import { createApp } from 'vue'
                    import App from './App.vue'
                    // 导入
                    import {createPinia} from "pinia";
                    //执行方法得到实例
                    const pinia = createPinia()
                    // 实例加入到app应用中
                    createApp(App).use(pinia).mount('#app')
                    

                    conter基础使用

                    定义store和组件使用store

                    
                    
                    
                    //导入方法
                    import  {defineStore} from "pinia";
                    import {ref} from "vue";
                    export const userCounterStore = defineStore('counter', ()=>{
                        const count = ref(0)
                        const increment =()=>{
                            count.value++
                        }
                        return {
                            count,
                            increment
                        }
                    })
                    

                    getters实现

                    //导入方法
                    import  {defineStore} from "pinia";
                    import {computed, ref} from "vue";
                    import axios from "axios";
                    const API_URL= 'http://geek.itheima.net/v1_0/channels'
                    export const userCounterStore = defineStore('counter', ()=>{
                        const count = ref(0)
                        const increment =()=>{
                            count.value++
                        }
                       const doubleCount =  computed(()=>count.value * 2)
                        const list = ref([])
                        const getList =async () => {
                            const res = axios.get(API_URL)
                            list.value =res.data.data.channels
                        }
                        return {
                            count,
                            increment,
                            doubleCount,
                            list,
                            getList
                        }
                    })