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 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫13 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中3 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊4 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿4 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj4 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝4 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3114 小时前
react必备JavaScript知识点(二)——类
前端·javascript
珠峰下的沙砾4 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
前端_学习之路4 小时前
javaScript--数据结构和算法
javascript·数据结构·算法