企企业业网网站站建建设设,淘宝网站备案,南康网站制作,小程序注册公司reactive#xff1a; 当使用reactive()处理数据后#xff0c;数据再次被使用时#xff0c;就会进行依赖收集 当数据发生改变时#xff0c;所有收集到的依赖进行对应的响应式操作#xff08;如#xff1a;更新界面#xff09;#xff0c; 事实上#xff0c;我们编写的d…reactive 当使用reactive()处理数据后数据再次被使用时就会进行依赖收集 当数据发生改变时所有收集到的依赖进行对应的响应式操作如更新界面 事实上我们编写的data选项也是在内部交给了reactive()将其变成响应式对象的 ref 在template中使用ref的变量时vue内部会自动帮我们进行解包取出其中的.value 所以并不需要通过变量.value是方式来使用 但是在setup()中还是需要用变量.value的方法使用 官方说template中的解包是浅层的解包如果将ref放到reactive中那么在模板中使用时它会自动解包 script setuplet count ref(0)let info reactive({count}) /scripttemplate!-- 使用时不需要写.value --h2{{ info.count }}/h2!-- 这样是不行的 --btn clickinfo.count 1 /btn!-- 修改的时候要加上.value --btn clickinfo.count.value 1 /btn /template其他的ref isRef() 判断是否是一个ref对象 shallowRef() 创建一个浅层(也就是一层)的ref对象 const info ref({ name: White }) info.value { age: 18 } // 直接修改了这个对象info还是响应式的 info.value.name Black // 修改了对象的name属性info还是响应式的const info shallowRef({ name: White }) info.value { age: 18 } // 直接修改的info.valueinfo还是响应式的 info.value.name Black // 这里不是直接修改的info.value而是修改的info.value.nameinfo就不是响应式了那么如果还想把info变成响应式的怎么办呢用triggerRef(变量名)这样triggerRef(info)后info就又变成响应式的了那么如果还想把info变成响应式的怎么办呢 用triggerRef(变量名)这样triggerRef(info)后info就又变成响应式的了 unref() 如果我们想要获取一个ref引用中的value那么就可以通过unref()实现 实质如果变量target是一个ref则返回target.value否则返回变量target本身即target isRef(target) ? target.value : target例子const nameRef ref(White)unref(nameRef) nameRef.valueunref(Black) Black总结当你不确定一个变量是不是ref的时候可以利用unref()使用 ref 获取组件、DOM元素 方法定义一个Ref对象将其绑定到组件、DOM元素的ref属性上即可 script setupimport { ref, onMounted } from vueimport ShowInfo from ./ShowInfo.vueconst titleRef ref()const showInfoRef ref()// 在 onMounted() 中获取Ref元素onMounted(){clog(titleRef, titleRef)clog(showInfoRef, showInfoRef)showInfoRef.value.showInfoFn() // 调用 ShowInfo组件中的方法} /scripttemplateh2 reftitleRef 标题 /h2show-info refshowInfoRef ShowInfo组件 /show-info /templateShowInfo组件 script setupfunction showInfoFn(){clog(我是ShowInfo组件的showInfoFn方法)}# 必须 defineExpose() 将函数、变量暴露出去父组件才能通过ref.showInfo.value.xxxxxx调用子组件ShowInfo中的函数、变量defineExpose({showInfoFn}) /script templateh2 showInfo组件 /h2 /templatescript setupimport { ref, reactive } from vueimport ShowInfo from ./showInfo.vuelet name ref(赵思)let age ref(12)let info reactive({address: 苏州, type: 伊人})// 接受 ShowInfo 组件 发射过来的事件function infoBtnClick(payload){clog(监听到showInfo组件发射过来的事件, payload)} /scripttemplateh2 标题 /h2show-info :namename :ageage :infoinfo infoBtnClickinfoBtnClick ShowInfo组件 /show-info /templateShowInfo组件 script setupimport { ref, defineProps, defineEmits, defineExpose } from vueconst props defineProps({name: {type: String, default: 默认值},age: {type: Number, default: 123},info: {type: Object, defautl: (){}}})// 向 父组件 发射事件const emit defineEmits([infoBtnClick])function btnClick(){emit(infoBtnClick, showInfo内部发生了点击)}function showInfoFn(){clog(我是 ShowInfo组件 中的方法)}defineExpose({showInfoFn}) /scripttemplateh2 {{ name }} - {{ age }} /h2button clickbtnClick/button /template