Vue3教程

1.ref;reactive响应式

<template>
<div>{{count}}{{object.foo}}</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
    props:{
        name:String,
    },
    setup(props) {
        watchEffect(()=>{
             console.log(props.name)
        })
        const count=ref(0)
        const object=reactive({foo:'bar'})
        return {
            count,
            object,
        }
    }
}
</script>

2.computed

<template>
<div>{{count}}</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
    props:{
        name:String,
    },
    setup(props) {
       const count=ref(1)
       const original=reactive({count1:0})
       const copy=readonly(original)
       
       const plusone= computed(()=>count.value+1)
       console.log(plusone.value)
       const plubstwo=computed({
           get:()=>count.value+1,
           set:(val)=>{
               count.value=val-1
           }
       })
       plustwo.value=11
    }
}
</script>

3.watchEffect

<template>
    <div>{{count}}</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
    props:{
        name:String,
    },
    setup(props) {

       const count = ref(1)
       const stop=watchEffect(()=>console.log(count))
       setTimeout(() => {
           count.value++
       })
       //停止watch
       stop()

       watchEffect((onInvalidate)=>{
           const token=performAsyncOperation(id.value)
           onInvalidate(()=>{
               //取消之前的异步操作
               token.cancel()
           })
       })

        //同步运行
        watchEffect(()=>{},{flush:'sync'})
        //组件更新之前
        watchEffect(()=>{},{flush:'pre'})

    }
}
</script>

4.watch

<template>
    <div>{{count}}</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
    props:{
        name:String,
    },
    setup(props) {
        const state=reactive({count:0})
        watch(()=>state.count,(count,precount)=>{})
        const count=ref(0)
        watch(count,(count,prevcont)=>{})
        const foo=ref(0)
        const bar=ref(0)
        watch([foo,bar],([foo,bar],[prefoo,prebar])=>{})

    }
}
</script>

5.生命周期

<template>
    <div>{{count}}</div>
</template>
<script>
import {onUpdated,onMounted,onUnmounted,onBeforeMount,onBeforeUpdate,onBeforeUnmount} from 'vue'
export default {
    props:{
        name:String,
    },
    setup(props) {
        onBeforeMount(() => {
            
        }),
        onMounted(() => {
            
        }),
        onBeforeUpdate(() => {
            
        }),
        onUpdated(() => {
            
        }),
        onBeforeUnmount(() => {
            
        }),
        onUnmounted(() => {
            
        }),

    }
}
</script>

6.provid/inject

<script>
import {} from 'vue'
export default {
    setup() {
        const them=ref('dark')
        const sym=Symbol()
        provide(sym,them)
    },
}
</script>

<script>
import {} from 'vue'
export default {
    setup() {
        const sym=Symbol()
        inject(sym,ref('light'))
    },
}
</script>

7.refs获取dom

<template>
<div ref='box'></div>
</template>
<script>
import {onMounted,ref} from 'vue'
export default {
    setup() {
        const box=ref(null)
        onMounted(() => {
            console.log(box.value)
        }),
        return {
            box
        }
    },
}
</script>