vue3笔记-生态篇

第一章 基础篇
第二章 脚手架篇

第三章 生态篇

详解VCA(组合式API)

VCA提供了一种新的组织和复用逻辑的方式,组合式API允许开发者将相关的逻辑组合在一起,并且更容易在不同组件之间进行共享。

每个使用组合式 API 的组件都必须包含一个 setup() 函数。在 setup() 函数中,你可以执行一些初始化的操作,返回响应式的数据、方法和其他属性供组件使用。

html 复制代码
<template>
    <div></div>
</template>
<script>
    export default{
        setup(){

        }
    }
</script>
绑定响应式数据(Reactive Ref)

reactive

用于绑定响应式对象,不能绑定简单数据

javascript 复制代码
export default {
    import {reactive} from 'vue'
    setup(){
        const userInfo = reactive({
            name:'',
            age:''
        })
    }
    return{
        userInfo
    }
}

ref

用于绑定响应式数据

js 复制代码
export default {
    import {ref} from 'vue'
    setup(){
        const userInfo = ref({
            name:'',
            age:''
        })
        const userHeigth = ref(178)
    }
    return {
      userInfo,
      userHeight
    }
}
VCA中的computed watch

computed

js 复制代码
export default {
    import {reactive,computed} from 'vue' 
    setup(){
        const userInfo = reactive({
            userName:''
        })
        let computedName = computed(()=>userInfo.userName+'1111')
    }
    return{
        userInfo,
        computedName
    }
}

watch

计算属性允许我们声明性地计算衍生值。然而在有些情况下,我们需要在状态变化时执行一些'副作用',例如:异步操作

js 复制代码
export default {
    import {reactive,watch} from 'vue' 
    setup(){
        const userInfo = reactive({
            userName:''
        })
        let watchName = watch(userInfo.userName,(oldValue,newValue)=>console.log(newValue,oldValue)
    }
    return{
        userInfo,
        watchName
    }
}
VCA中的provide inject

依赖注入

js 复制代码
import {provide,inject,ref} from 'vue'
// 根组件
const testData = ref(true)
provide('testName',testData)

//后代组件
onMounted(()=>{
    const testSonData = inject('testName')
    console.log(testSonData.value)
})
Vue 3.2 的setup语法糖
html 复制代码
<script setup></script>

Vue Router

相关推荐
天水幼麟2 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
daols882 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
天水幼麟4 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
绿皮的猪猪侠5 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj5 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴6 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript