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>。