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

相关推荐
拾光拾趣录32 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子32 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神33 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao34 分钟前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风35 分钟前
JS执行机制-event loop
javascript
止观止36 分钟前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
1024小神37 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵37 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
合作小小程序员小小店37 分钟前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
202638 分钟前
11. vite打包优化
前端·javascript·vite