完成第一个 Vue3.2 项目后，这是我的技术总结

<script>
  export default {
    setup(props,ctx){
     const a = ref(0)
     //必须return才能在template中使用，这里就存在一个重复操作的问题，每次都得cv,万一忘记就得检查
     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' }
  //这时候需要写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({}) // 报错

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

delete b.c
//假设b这个变量中有很多属性，则需要遍历
Object.keys(b).forEach(key=>delete b[key])

const a = ref(0)
a=1 //报错
//做判断的时候
if(a){ //永远为true,因为a是一个对象，不是数字}

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
//这样写的好处是，以后引用的时候可以直接from '@/store'，并且当文件多了，可以用通过webpack的require.context或者vite的import blob来自动处理
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
})