vue3一些常用的方法

<script setup type="ts">
import { ref, reactive, computed} from 'vue'

//父子通讯，接受父亲传值

const props = defineProps({
    name:String，//普通类型

    //设置多个类型

   name: [String, Number],//或: String｜Number,

    obj: {//对象
    type: Object,
    default: () => { return {} }
    }

   arr:{//数组

    type: Array,
      // default: function () { return [] }
      default: () => []

 }
})

//ts写法

const props = defineProps<{
    name?:string

   //多个类型

    name:string |  number |undefined;;
}>()
</script>

//或者使用接口

interface animal{
    name?:string
}

const props = defineProps<animal>()

 

  const money = ref(1)//ref定义基础数据

  const objData = reactive({

id:1

})//定义对象类型

countMoney = computed(() => {  // 传递函数
      return money+ 5
    })

//监听，注意数组对象监听时会新旧值相同，如需要旧值需要监听前先深拷贝一下旧值

watch(objData,(val,oval)=>{//第一种
        // console.log('新',val.旧,oval);
      },{
        immediate:true,
        deep:true//开启深度监听,能够侦听到对象属性值的变化
      })

watch(()=>state.id,(val,oval)=>{//第二种
      },{
        immediate:true
      })
</script>