西安晨曦e动网站建设,域名查询中心官网,加工平台制作,大冶seo网站优化排名推荐目录前言一#xff0c;ref和reactive的简单复习1.ref函数1.2 reactive函数1.3 用ref定义对象类型数据不用reactive二#xff0c;watch的value问题2.1 ref2.1.1 普通类型数据2.1.2 对象类型数据2.1.3 另一种方式2.2 reactive三#xff0c;总结后记前言
在Vue3中#xff0c;…
目录前言一ref和reactive的简单复习1.ref函数1.2 reactive函数1.3 用ref定义对象类型数据不用reactive二watch的value问题2.1 ref2.1.1 普通类型数据2.1.2 对象类型数据2.1.3 另一种方式2.2 reactive三总结后记前言
在Vue3中定义响应式数据有两种方式第一种是ref第二种是reactive。在使用监视属性的时候我们可能会监视普通类型的数据也就是ref定义的也可能会监视对象或者数组类型的数据。也就是reactive定义的当然也可以是ref定义的
之前在Vue2与Vue3响应式的详解与对比博客中介绍过ref和reactive的用法及区别以及为什么要用到value。本篇博客在此基础上阐述watch检测数据的时候要不要加value的这个问题。
一ref和reactive的简单复习
这一节是对ref和reactive的简单复习如果要深层次的学习以及知晓原理可以看上面那一篇链接博客。
1.ref函数
我们先来看一个ref定义的数据答应出来是个什么见下面代码
templatediv学校名称: {{ school }}/divbutton clickschool 家里蹲大学修改学校名称/button
/templatescript
import {ref, reactive, watch} from vue
export default {name: App,setup() {let school ref(湖北师范大学)watch(school, (newValue, oldValue) {console.log(school被修改);console.log(school)})return {school}}
}
/script效果 可以看到最后得到的是一个RefImpt引入对象的实现对象的实例对象简称引用对象。使用时模板语法中可以省略value函数中需要使用value进行修改。
ref实现响应式的原理和Vue2中实现响应式的原理是一样的都是通过Object.defintProperty来实现的。
1.2 reactive函数
reactive函数用作对象及数组类型的数据。请看以下代码
templatediv学校名称{{ school }}/divbutton clickschool 家里蹲大学修改学校名称/buttondiv姓名: {{ person.name }}/divdiv工作名称: {{ person.job.type }}/divdiv工作薪水: {{ person.job.salary }}/divbutton clickperson.job.salary 100k修改薪水/button
/templatescript
import { ref, reactive, watch } from vue
export default {name: App,setup() {let school ref(湖北师范大学)let person reactive({name: 巧克力小猫猿,job: {type: 前端开发工程师,salary: 90k}})watch(person, (newValue, oldValue) {console.log(person被更改)console.log(person)})return { school, person }}
}效果 对于用reactive函数定义的对象类型的数据内部原理是检测Proxy实例对象。所以在书写是时候不需要value模板语法中也不需要value并且可以深度监视。
1.3 用ref定义对象类型数据不用reactive
如下面代码
templatediv学校名称{{ school }}/divbutton clickschool 家里蹲大学修改学校名称/buttondiv姓名: {{ person.name }}/divdiv工作名称: {{ person.job.type }}/divdiv工作薪水: {{ person.job.salary }}/divbutton clicklook点击查看person/button
/templatescript
import { ref, reactive, watch } from vue
export default {name: App,setup() {let school ref(湖北师范大学)let person ref({name: 巧克力小猫猿,job: {type: 前端开发工程师,salary: 90k}})function look() {console.log(person)}return { school, person, look}}
}
/script效果如下: 可以看出如果ref遇到一个对象类型的数据类型会求助reactive。因为检测Proxy实例对象是由reactive来监测到。而reactive是深层次的所所以能够检测到Proxy内部的内容。
二watch的value问题
2.1 ref
首先遇到ref我们脑海中的原则是模板语法中不用valuejs中操作数据需要带上value。
在watch中先说结论如果要检测一个普通类型的数据不需要value。如果检测对象类型的数据需要加value
2.1.1 普通类型数据
先说普通类型数据我们现在以一个例子来说明如下代码
templatediv违规次数: {{ sum }}/divbutton clicksum违规次数加1/buttondiv姓名: {{ person.name }}/divdiv工作名称: {{ person.job.type }}/divdiv工作薪水: {{ person.job.salary }}/divbutton clickperson.job.salary 100k修改薪水/button
/templatescript
import { ref, reactive, watch } from vue
export default {name: App,setup() {let sum ref(0)let person reactive({name: 巧克力小猫猿,job: {type: 前端开发工程师,salary: 90k}})//监视sumwatch(sum, (newValue, oldValue) {console.log(sum被检测了)console.log(sum)})return { person, sum}}
}
/script我们点击sum按钮后sum这个引用对象被监测了。 但是如果监测的是sum.value: 无法正常运行 原因sum加一后值为1我们监测的是sum的结构而不是1这个数字。所以在监视ref定义的普通类型数据时不用加value。
2.1.2 对象类型数据
再说ref定义的对象类型数据被监视的情况。请看下面代码
templatediv违规次数: {{ sum }}/divbutton clicksum违规次数加1/buttondiv姓名: {{ person.name }}/divdiv工作名称: {{ person.job.type }}/divdiv工作薪水: {{ person.job.salary }}/divbutton clickperson.job.salary 100k修改薪水/button
/templatescript
import { ref, reactive, watch } from vue
export default {name: App,setup() {let sum ref(0)let person ref({name: 巧克力小猫猿,job: {type: 前端开发工程师,salary: 90k}})//监视sum// watch(sum.value, (newValue, oldValue) {// console.log(sum被检测了)// console.log(sum)// })//监视对象类型watch(person, (newValue, oldValue) {console.log(person被监视)console.log(person)})return { person, sum}}
}
/script当我改变薪水时候没办法正常运行。但是一旦我加上value 可以正常运行 因为对象类型的数据经过ref函数加工会变成引用对象而该对象的value是Proxy类型的。所以我们如果需要监视Proxy对象中的数据则需要监视的是person.value的结构。
2.1.3 另一种方式
经过了上面的讲解应该不难开出对象类型的数据之所以要加value是因为我们要监视的是对象中的Proxy对象中的属性。
那我们不妨开启watch的深度监视同样可以解决问题。
2.2 reactive
reactive在监视的时候不需要value。前面复习过reactive会自动帮我们加上value。并且reactive是深度监视的。它可以窥视对象内部的对象。所以我们只需要监视Proxy对象即可。
三总结
1.watch中若监视的是普通类型的数据不可带value因为我们检测的是该数据的结构而不是数字。 2.监测ref函数加工的对象时需要加value因为使用ref来定义对象ref是需要求助reactive的因为reactive可以检测Proxy实例对象是深层次的。 3.检测ref函数加工的对象还有另一种方法那就是开启deep的深度监视。 4.监测reactive加工的对象时不需要value因为reactive是通过Proxy拦截对象中属性的变化。而且reactive的监测是深层次的。
不清楚的小伙伴可以去翻看前面的链接文章里面有详细的原理讲解。
后记
以上内容如果存在问题希望读者朋友批评指正
感谢您的阅读欢迎关注后续会带来更多深层次的内容
