<script>
   export default {
     setup(props,ctx){
      const a = ref(0)
      //必須return才能在template中使用，這里就存在一個(gè)重復(fù)操作的問題，每次都得cv,萬(wàn)一忘記就得檢查
      return {
          a
      }
     }
   }
</script>

<script setup>
    const a = ref(0)
</script>

   const a = ref(0)
   const b = ref('')
   const c = ref(true)
   const d = reactive({})
   const actionA = ()=>{a.value++}
   const actionC = ()=>{c.value=!c.value}
   const actionB = ()=>{b.value += 'test' }
   const actiond = async ( )=> {
       const res =  await ajax(`url`)
       d.a = res.a
       d.b = res.b
       d.c = res.c
   }
   const resetD = ()=>{
       Object.keys(d).forEach(key=>delete d[key])
   }

//usePage.js
export default ()=>{
    const a = ref(0)
   const b = ref('')
   const c = ref(true)
    const actionA = ()=>{a.value++}
   const actionC = ()=>{c.value=!c.value}
   const actionB = ()=>{b.value += 'test' }
   //這時(shí)候需要寫return
   return {
       a,actionA，
       b,actionB,
       c,actionC
   }
}
// usePageD.js
export default ()=>{
const d = reactive({})
const actionD = async ( )=> {
       const res =  await ajax(`url`)
       d.a = res.a
       d.b = res.b
       d.c = res.c
   }
   const resetD = ()=>{
       Object.keys(d).forEach(key=>delete d[key])
   }
   return {
       d,actionD,resetD
   }
}

//組件A
import usePage from './usePage'
const {a,actionA} = usePage()
//組件D
import usePage from './usePageD'
const {actionD,resetD} = usePageD()

//jsBridge.js
const callBridge = (msg)=>{
 try {
     window.webkit.xxxHandler.postMessage(msg)
 }catch(e){
     console.log(msg)
 }
}
export const bridgeA = (id,cb='')=>{
    const msg = {
     func:'A',
     params:{id},
     cb
    }
    callBridge(msg)
}

evaluateJavaScript(cb(data))

//App.vue
const store = useStore()
window.test = function(data){
    store.commit('saveA',data)
} 
//其他組件中
const handleClick = ()=>{
    bridgeA('123','test')
}

//useBridgeA.js
export default ()=>{
const id = ref('')
const saved = reactive({})
window.test = function(data){
    saved.data = data    
}
const handleClick = ()=>{
    bridgeA('123','test')
}
onBeforeUnmount(()=>{window.test = null})
return {saved,handleClick,id}
}

<template>
<input v-model="id" />
<button @click="handleClick">
Action A
</button>
</template>
<script setup>
import useBridgeA from './useBridgeA'
const {id,handleClick} = useBridgeA()
</script>

const a = shallowRef({})
const b = reactive({})

a.value = {c:1}

Object.assign(b,{c:1})

a.value = {}

b=reactive({}) // 報(bào)錯(cuò)

let b = reactive({})
b.c = 1
b = reactive({})

delete b.c
//假設(shè)b這個(gè)變量中有很多屬性，則需要遍歷
Object.keys(b).forEach(key=>delete b[key])

const a = ref(0)
a=1 //報(bào)錯(cuò)
//做判斷的時(shí)候
if(a){ //永遠(yuǎn)為true,因?yàn)閍是一個(gè)對(duì)象，不是數(shù)字}

const a = ref(0)
if(unref(a)>0){
 // do sth
} else {
 // do another
}

<template>
<p>123</p>
</template>
<style scoped>
p{
 color:var(--pcolor)
}
</style>

<template>
<p>123</p>
</template>
<script setup>
const pcolor = ref('#000')
</script>
<style scoped>
p{
 color:v-bind('pcolor')
}
</style>

<template>
<div>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
</template>
<script setup>
const text = ref('hello')
</script>
<style scoped>
div p:first-of-type:before{
 content:v-bind('text')
}
</style>

<template>
<div>
    <p :data-text="text">123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
</template>
<script setup>
const text = ref('hello')
</script>
<style scoped>
div p:first-of-type:before{
 content:attr(data-text)
}
</style>

// store/user.js中定義具體的store
export const UserStore =  defineStore('user', {
state:()=>({
    name:'',
    id:''
})
getters:{
nameId:state=>`${state.name}_${state.id}`
}
actions:{
    async getUserInfo(){}
}
})
//store/index.js
//這樣寫的好處是，以后引用的時(shí)候可以直接from '@/store'，并且當(dāng)文件多了，可以用通過(guò)webpack的require.context或者vite的import blob來(lái)自動(dòng)處理
export {UserStore} from './user'

import UserStore from  '@/store'
const user = UserStore()
user.name = 'test'
//or
user.$patch({
name:'test',
id:123
})
//or 
user.$patch(state =>{
    state.name = 'test'
    state.id = 123
})