List Vue-4

watch：侦听属性

可以用来观察和响应 Vue 实例上数据的变动

当被观察的数据发生变化时，你可以执行一些自定义的逻辑。这对于执行异步操作或开销较大的操作特别有用，因为你可以控制这些操作在何时执行，而不是在每次数据变化时都执行。

其属性名是要观察的数据的名称（字符串形式），属性值是一个函数，这个函数会在对应的数据变化时被调用。这个函数接收两个参数：新值和旧值，允许你比较它们，并执行必要的操作。

监听多个数据：

配置深度侦听：

deep:true：开启深度侦听,如果对象中包含多个属性，所有属性默认都会被侦听，如果是多个参数，所有参数都会被侦听

倾听对象中的某一个属性：

生命周期函数：onMounted

导入子组件：SonCom import SonCom from './SonComponent.vue'

——————————————————————————————

定时函数，在设定时间后执行，时间单位毫秒

参数1：执行过程，参数2：设定时间（毫秒）

setTimeout(()=>(count.value+=200),2000)

——————————————————————————————

获得页面元素：

子组件接收父组件传递过来的数据：

const prop = defineProps：声明接收父组件传递过来的数据

子组件向父组件中传递数据：

const emit = defineEmits(['get-son-message'])：声明向父组件中传递数据

向emit中存入数据，key值是创建emit对象时设置好的：

例：emit('get-son-message','子组件中的数据')

暴露属性：defineExpose

仅在使用<script setup>语法时可用

当组件中包含<script setup>和普通<script>时，<script>中定义的数据和方法不会被暴露出来

目录：

1、支持组合式API
        (1)setup()程序的入口
        (2)reactive和ref存放数据的函数,可实现数据绑定
                ①reactive:存放对象类型数据，可以返回该对象
                ②ref:存放简单类型或对象类型的数据，返回一个对象
                ③computed:计算属性
                ④watch侦听属性
                        1)侦听一个数据
                        2)侦听多个数据
                        3)深度侦听，默认情况属于浅层侦听，只能侦听至第一层，如果希望侦听对象里的属性需要配置深度侦听。
                        4)精确侦听，如对象中有多个，希望只侦听某一个属性需要配置精确侦听
                ⑤生命周期函数
                        1)组件从创建到销毁的过程称为生命周期，可以利用生命周期函数在创建或销毁过程中进行逻辑操作
                        2)setup、onMounted加载时、onUnmounted组件卸载、onBeforeUpdate更新前、onUpdate
                        3)2.0版本的生命周期函数名，少on
                ⑥父子通信
                        1)父传子
                        2)子传父
                ⑦获取页面元素