vue3.0 watch,vue计算属性和watch的区别
本文主要介绍vue3响应数据和手表属性的知识。本文通过示例代码向您详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
它是组合APIref Vue3中两个最重要的响应API。ref用于处理基本类型数据，reactive用于处理对象(递归深度响应)。如果使用ref对象/数组，在内部，它会自动将对象/数组转换为反应式代理对象ref。在内部，它将通过向value属性添加getter/setter来劫持数据。内部会用proxy劫持对象内部的所有数据，用Reflect操作对象内部数据ref的数据操作。js中需要值，但模板(。内部解析模板时将自动添加值)。
Divref和/div
divmsg1:{{msg1}}/div
divmsg2:{{msg2}}/div
divmsg3:{{msg3}}/div
button @ click= update change/button
/模板
脚本语言
从“vue”导入{reactive，ref }；
导出默认值{
setup(){
const msg1=ref(hello )
const msg2=电抗({
姓名：“杰克”，
妻子：{
名字：“玫瑰”
}
})
Constmsg3=ref(如果是{//ref中的对象，那么它已经被reactive处理过，形成了一个代理对象。
姓名：“杰克”，
妻子：{
名字：“玫瑰”
}
})
函数updata(){
msg1.value=
msg2.wife.name=
msg3.value.wife.name=
}
返回{
msg1，
msg2，
msg3，
升级文件
}
}
}
/脚本
计算属性与监视
computed函数：
有getter/setter
与watch配置功能一致
与计算出的配置函数一致。
一旦监控到指定的响应数据，将自动执行监控回调。默认情况下，回调不会在开始时执行，但是您可以通过将immediate配置为true来指定在开始时立即执行回调。第一次，您可以通过将deep配置为true来指定深度监控
watchEffect函数
。
不是直接指定要监控的数据，而是监控回调函数中使用的响应数据。默认情况下，它将在开始时第一次执行，以便收集要监控的数据，并在监控数据发生变化时回调模板。
H1计算属性和监控/h1
表单分组
图例名称操作/图例
姓氏：input type=text placeholder=输入姓氏 v-model=user.firstNamebr
名字：输入type=text placeholder=输入名字 v-model=user.lastName
/字段集
表单分组
图例计算属性和监控/图例
name:input type= text placeholder= display name v-model= full name 1 br
name:input type= text placeholder= display name v-model= full name 2 br
name:input type= text placeholder= display name v-model= full name 3 br
/字段集
/模板
脚本语言
从“vue”导入{reactive，ref，computed，watch，watch effect }；
导出默认值{
setup() {
const user=reactive({
名字：“东部”，
姓氏：“不败”
})
/*
* vue 3中的计算属性
*如果只有一个回调函数传入计算属性，则意味着get。
*返回的是一个ref对象。
* */
const fullName1=computed(()={
返回用户.名字-用户.姓氏
})
const fullName2=computed({
get(){
返回用户.名字-用户.姓氏
},
设置(值){
const name=val.split(-)
user.firstName=name[0]
用户.姓氏=名称[1]
}
})
//监视器属性
让fullName3=ref( )
watch (user，({firstname，lastname})={//user)中对象的解构和赋值
全名3 . value=名字-姓氏
}、{immediate:true}) //immediate开头可以执行一次，也可以加入深度监控。
//watchEffect(()={
//full name 3 . value=user . first name - user . last name
//})//更聪明，一开始会自动执行一次。
/*
* wathc可以监控多个属性。当监听无响应数据时，您需要()=
* */
watch([()=user.firstName，()=user.lastName]，()={
Console.log(已执行观察)
})
返回{
用户，
全名1，
全名2，
全名3
}
}
}
/脚本
这就是这篇关于vue3响应数据和观察属性的文章。有关vue3watch属性的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。