consta={count:ref(0),}constb=reactive({list:[a],// `a.count` will not unwrap!!})// no unwrap for `count`, `.value` is requiredb.list[0].count.value===0// true

constb=reactive({list:[{count:ref(0),// no unwrap!!},],})// no unwrap for `count`, `.value` is requiredb.list[0].count.value===0// true

consta=reactive({list:[reactive({count:ref(0),}),]})// unwrappeda.list[0].count===0// truea.list.push(reactive({count:ref(1),}))// unwrappeda.list[1].count===1// true

<template><divref="root"></div></template><script>exportdefault{setup(){constroot=ref(null)onMounted(()=>{// the DOM element will be assigned to the ref after initial renderconsole.log(root.value)// <div/>})return{        root,}},}</script>

exportdefault{setup(){constroot=ref(null)onMounted(()=>{// the DOM element will be assigned to the ref after initial renderconsole.log(root.value)// <div/>})return{      root,}},render(){// with JSXreturn()=><divref="root"/>},}

<template><div:ref="el => root = el"></div></template><script>exportdefault{setup(){constroot=ref(null)return{        root,}},}</script>

exportdefault{setup(){constroot=ref(null)return()=>h('div',{ref:root,})// with JSXreturn()=><divref={root}/>},}

exportdefault{setup(initProps,setupContext){constrefs=setupContext.refsonMounted(()=>{// the DOM element will be assigned to the ref after initial renderconsole.log(refs.root)// <div/>})return()=>h('div',{ref:'root',})// with JSXreturn()=><divref="root"/>},}

import{reactive,set,del}from'@vue/composition-api'consta=reactive({foo:1})// add new reactive keyset(a,'bar',1)// remove a key and trigger reactivitydel(a,'bar')

watch(()=>{/* ... */},{immediate:true,onTrack(){},// not availableonTrigger(){},// not available})

constapp1=createApp(RootComponent1)app1.component('Foo',Foo)// equivalent to Vue.component('Foo', Foo)app1.use(VueRouter)// equivalent to Vue.use(VueRouter)constapp2=createApp(RootComponent2)app2.component('Bar',Bar)// equivalent to Vue.component('Bar', Bar)

import{has_h}from'@vue/composition-api'exportdefault{setup(){constvm=getCurrentInstance()consth=_h.bind(vm)return()=>h('div',{ref:'root',})},}

defineComponent({setup(props){const{ bar}=toRefs(props.foo)// it will `warn`// use this insteadconst{ foo}=toRefs(props)consta=foo.value.bar}})

functionisComputed<T>(o:ComputedRef<T>|unknown):o isComputedRef<T>functionisComputed(o:any):o isComputedRef{return!!(isRef(o)&&o.effect)}

exportdefault{data(){return{// will result { a: { value: 1 }} in templatea:ref(1),}},}

defineComponent({emits:{// has no effectssubmit:(eventOption)=>{if(...){        returntrue}else{console.warn('Invalid submit event payload!')returnfalse}}}})