vue3相关基础

1、ref和reactive的区别

两者都是响应式数据的声明。Reactive只适用于非基本数据类型，如对象，数组等。而ref是兼容适用于reactive的的数据类型的以及其他数据，灵活性较高。ref声明的变量取值时需要.value。在<template></template>中不需要加.value，模版语法会自动解析。ref底层也是用到了reactive的，相当于ref多包装了一层，支持基本数据类型。

2、watch和watcheffct的区别

两者都是监听数据变化，然后执行回调函数。两者的区别是适用watch需要指明监听对象。watcheffct则不需要指明，只要在回调函数中的的响应式变量就是监听对象。在watch中对于对象，如果用箭头函数来返回了这个对象，对象的属性发生变化，这时候监听失效了，我们可以用watch的deep属性进行开启深度监听恢复监听效果。两者还有一个区别，当页面初次加载时watch是不会触发回调函数的，而watcheffct会执行回调函数。

3、父子组件传参

父组件向子组件传参，在子组件中使用defineprops定义要传过来的参数，指定参数类型，是否必传，以及可以设定默认值。这里props中定义的参数只能读，不可修改。在父组件指定传参的字段，在指定参数即可。

子组件向父组件传参，可以使用事件进行传参，父组件来监听子组件定义的事件。子组件中要触发的事件可以显式地通过 defineEmits() 来声明。

这里是通过点击事件去触发事件的传递，注意，父组件需要监听子组件自定义的事件。

还有一种传参方式：使用插槽，作用域插槽进行传参，我们可以在子组件定义一个插槽，指定要传参的内容，父组件用插槽名或者v-solt进行接受数据。

子组件：

父组件：

这里父组件不能用<div>标签去接收插槽，得适用<template>。在父组件中如果要使用name去指定子组件中的插槽，得用<template>。