局部注册步骤：import 组件1 from './components/组件1'--------在vue.app注册

components:{

组件名1：组件名1，组件名2：组件名2

}

全局注册：在main.js中注册

import hmButton from './components/hmButton'
//Vue.component('组件名',组件对象)
Vue.component('hmButton', hmButton)

scoped防止样式污染

data必须是一个函数data(){ return { count:999 } }

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

setup语法糖：

<script lang="ts" setup>
      let name='张三'
        let age=18
        let tel='123456789'  
        //方法
        function showTel(){
            alert(tel)
        }
        function changeName(){
            name='zhang-san'
        }
        function changeAge(){
            age=20
        }
        // return {name,age,changeAge,changeName,showTel}
</script>

ref响应式数据：

ref(传参)：基本类型的传入和对象类型，返回对象，通过.value拿值
reactive：只可以用对象类型，直接取值

 import { reactive } from 'vue';
    let per=reactive({
        name:'张三',
        age:19
    })

    function changeAge(){
        per.age++
    }
    function changeName(){
        per.name+='~'
    }

     //解构
    let {name,age}=toRefs(per)

    function changeAge(){
        age.value++
    }
    function changeName(){
        name.value+='~'
    }

Watch监视

监视1、ref定义的数据，2、reactive定义的数据3、一个函数的返回值4、一个包含上述内容的数组

watch1:

 import {ref,watch}  from 'vue'
    let sum=ref(20)
    function inl(){
        sum.value++
    }

    function del(){
        sum.value--
    }

    watch(sum,()=>{
        console.log('sum变化了')
    })

watch2:

import {ref,watch}  from 'vue'
   let person=ref({
    name:'张三',
    age:12
   })
   function changeName(){
        person.value.name='李四'
   }
   function changeAge(){
        person.value.age=20
   }
   function changePerson(){
    person.value={name:'林',age:20}
   }
   watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue);
   },{deep:true})

watch3:

watch4:监视对象里面的某一个属性 ，放入回调函数来返回传参（）=>

eg:watch( ()=>person.car,(newValue,oldValue)=>{ console.log(newValue,oldValue); },{deep:true})

watch5:一个数组包含多个需要监视的属性

watchEffect:语法--->watchEffect(()=>{})
ref标记属性：1、普通标签dom2、组件标签：组件实例

let title2=ref()
    function change(){
      console.log(title2.value);
    }
  //父拿子的东西
      defineExpose({a,b,c})  //暴露

接口-泛型--自定义类型

接口:

export interface PersonInter {
    id: string,
    name: string,
    age: number
}

泛型：

import {type PersonInter} from '@/types'
    // let person:PersonInter={id:'123',name:'zhang',age:18}
    let PersonList:Array<PersonInter>=[{name:'张三',age:17,id:'66666'},{name:'李四',age:29,id:'5555'},{name:'王五',age:20,id:'2222'}]

自定义类型：

export type Persons = Array<PersonInter>

父传子数据：props的使用

 let x=defineProps(['list'])//只接收

接受list+限制类型 defineProps<{list:Persons}>()

接受list+限制类型+限制必要性+指定默认值 withDefaults(defineProps<{list?:Persons}>(),{ list: ()=>[{id:'ayuuus',name:'康师傅',age:20}] })

Hooks:

//默认暴露
export default function () {
    let sum = ref(0)
    function getSum() {
        sum.value++
    }

    return { sum, getSum }
}
//接受解构
 import useDog from '@/hooks/useDog';
    import useSum from '@/hooks/useSum';

    const{sum,getSum}=useSum()
    const{dogList,addDog}=useDog()

pages

两种工作模式：history：createWebHistory（）

to的两种写法：

字符串：to=”“

对象：:to=”{path:''}“

子路由路径是相对路径

query参数：

：to="{ path:' ' //可以用name替换 ,query:{}}"

params参数

第一种写法：：to"`/news/detail/${news.id}/${news.title}`"

第二种写法：：to="{

name:'' ， //只能用name

params:{

id:'',

content:''

}

}"

交出参数：

1、props:true 2、props(route){ return route.query}