Vue3_基础使用_2
这节主要介绍：标签和组件的ref属性，父子组件间的传递值，ts的接口定义，vue3的生命周期
1.标签的ref属性。
1.1ref属性就是给标签打标识用的，相当于html的id，但是在vue3中用id可能会乱，下面是ref的使用。
打一个普通标签，并且将对象转为ref的响应式：
//1 ref是标识类似ID,获取标识的值
AAA
1.2给组件标记一个ref属性，并且实现 子组件 给 父组件传递数据。
子组件留意 defineExpose({a,b}); //让父组件看那个就交出去哪个，不交父组件就拿不到。
//子组件
父组件接收
//父组件中
2 .ts的接口定义
a.新建个文件夹types里面建立index.ts文档
定义了一个对象接口规范，后面定义这个对象都得按这个规范来（名称，类型）.
export interface personInterface{
id:string,
name:string,
age:string
}//定义对象接口规范并暴露出去定义一个对象数组接口标准
//4定义个自定义类型(就是个数组)
export type interface persons=Array
//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传递给子组件
子组件中：
//子组件 只接收
import{defineProps}from 'vue'
let v=defineProps(['list']);//v.list;数组内可以是多个
{{list}}//html 可以直接使用
//子组件 接收+限制类型 告诉父组件我只要persons的值
defineProps()//这个list对应父组件写的参数名称，加?:可以不传
//子组件 接收+限制类型+默认值
//告诉父组件 我要一个persons类型的数组，若不给我就显示默认的值
import{withDefaults}from 'vue'
withDefaults(defineProps(),{
list:()=>[{id:'001',name:'张三',age:20}]
})
以上三种接收方式。 4 vue3的生命周期：
vue2生命周期
创建(创建前beforeCreate 创建完成created)
挂载(挂载前beforeMount 挂载完成mounted)
更新(更新前beforeUpdate 更新完成updated)//页面有更新才执行
销毁(销毁前beforeDestroy 销毁完成destroyed)
vue3生命周期
创建