这节主要介绍：标签和组件的ref属性，父子组件间的传递值，ts的接口定义，vue3的生命周期

1.标签的ref属性。

   1.1ref属性就是给标签打标识用的，相当于html的id，但是在vue3中用id可能会乱，下面是ref的使用。
打一个普通标签，并且将对象转为ref的响应式：

//1 ref是标识类似ID,获取标识的值
<span ref='title1'>AAA</span>
<script lang="ts" setup>let title1=ref();//变量要与html的ref相同console.log(title1.value);
</script>

1.2给组件标记一个ref属性，并且实现    子组件  给   父组件传递数据。

子组件留意  defineExpose({a,b});  //让父组件看那个就交出去哪个，不交父组件就拿不到。

  //子组件<script lang="ts" setup>import{ref,defineExpose}from 'vue'let a=ref(100);//声明一个响应式变量let b=ref(200);defineExpose({a,b});//让父组件看那个就交出去哪个</script>

父组件接收

   //父组件中<person ref='ren'/><!--给子组件标记ref属性--><script lang="ts" setup>import{ref}from 'vue'let ren=ref();//获取子组件console.log(ren.value);//这里面有子组件给的数据</script>

2 .ts的接口定义

  a.新建个文件夹types里面建立index.ts文档

   定义了一个对象接口规范，后面定义这个对象都得按这个规范来（名称，类型）.

export interface personInterface{id:string,name:string,age:string
}//定义对象接口规范并暴露出去

  定义一个对象数组接口标准

//4定义个自定义类型(就是个数组)
export type interface persons=Array<personInterface>
//personInterface[]也行  //定义数组接口规范

 ts定义这些的好处是在后面的使用中保证不会写错，都要准守的标准。

利用接口定义对象及数组对象：

//引入ts文件  @代表到根目录，如果是index可以不写
import {type personInterface,type persons} from '@/types/index.ts'//使用对象接口规范 如果你的属性及类型错了它会提示
let person:personInterface ={id:'001',name:'张三',age:20}//使用自定义数组规范
let personlist:persons=[{id:'001',name:'张三',age:20},,,]

3 利用上面的接口  父组件给子组件传递数据，保证了正确性。

父组件中：

//引入
import {type personInterface,type persons} from '@/type'
//1父组件根据接口 定义对象数组
let personlist:persons=[{id:'001',name:'张三',age:20},{id:'002',name:'张4',age:23}]
//2传递给子组件
<person :list='personlist' />

子组件中： 

//子组件  只接收
import{defineProps}from 'vue'
let v=defineProps(['list']);//v.list;数组内可以是多个
<span>{{list}}</span>//html 可以直接使用//子组件  接收+限制类型   告诉父组件我只要persons的值
defineProps<list?:persons>()//这个list对应父组件写的参数名称，加?:可以不传//子组件 接收+限制类型+默认值
//告诉父组件  我要一个persons类型的数组，若不给我就显示默认的值
import{withDefaults}from 'vue'
withDefaults(defineProps<list?:persons>(),{list:()=>[{id:'001',name:'张三',age:20}]
})以上三种接收方式。

4 vue3的生命周期：

vue2生命周期
  创建(创建前beforeCreate   创建完成created)
  挂载(挂载前beforeMount    挂载完成mounted)
  更新(更新前beforeUpdate   更新完成updated)//页面有更新才执行
  销毁(销毁前beforeDestroy  销毁完成destroyed)

vue3生命周期
  创建  <script setup>...这里直接写就是创建</setup>
  挂载 
      import{onBeforeMount,onMounted}from 'vue'
      onBeforeMount(()=>{...挂载代码});      onMounted(()=>{...挂载完毕代码});
  更新
     import{onBeforeUpdate,onUpated}from 'vue'
     onBeforeUpdate(()=>{...更新代码});      onUpated(()=>{...更新完毕代码});
  卸载
     import{onBeforeUnmount,onUnmounted}from 'vue'
     onBeforeUnmount(()=>{...卸载代码});   onUnmounted(()=>{...卸载完毕代码});

vue3将销毁改为了卸载，创建只有一个方法，直接在setup中写即可，以上还不包括路由的钩子。