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

相关推荐
coderlin_42 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
兴趣使然_2 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js