浅析vue3响应式数据与watch属性
短信预约 -IT技能 免费直播动态提醒
- 是Vue3的 composition API中2个最重要的响应式API
- ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
- 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
- ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
- reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
- ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
<template>
<div>ref与</div>
<div>msg1:{{msg1}}</div>
<div>msg2:{{msg2}}</div>
<div>msg3:{{msg3}}</div>
<button @click="updata">改变</button>
</template>
<script lang="ts">
import {reactive, ref} from "vue";
export default {
setup(){
const msg1=ref('hello')
const msg2 = reactive({
name: 'jack',
wife: {
name:'rose'
}
})
const msg3 = ref({ // ref中如果是一个对象，那么经过了reactive处理，形成了Proxy对象
name: 'jack',
wife: {
name: 'rose'
}
})
function updata(){
msg1.value += '++'
msg2.wife.name += '++'
msg3.value.wife.name += '++'
}
return {
msg1,
msg2,
msg3,
updata
}
}
}
</script>
计算属性与监视
computed函数:
- 与computed配置功能一致
- 有getter/setter
与watch配置功能一致
- 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
- 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
- 通过配置deep为true, 来指定深度监视
watchEffect函数
- 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
- 默认初始时就会执行第一次, 从而可以收集需要监视的数据
- 监视数据发生变化时回调
<template>
<h1>计算属性与监视</h1>
<fieldset>
<legend>姓名操作</legend>
姓氏：<input type="text" placeholder="输入姓氏" v-model="user.firstName"><br>
名字：<input type="text" placeholder="输入名字" v-model="user.lastName">
</fieldset>
<fieldset>
<legend>计算属性和监视</legend>
姓名：<input type="text" placeholder="显示姓名" v-model="fullName1"><br>
姓名：<input type="text" placeholder="显示姓名" v-model="fullName2"><br>
姓名：<input type="text" placeholder="显示姓名" v-model="fullName3"><br>
</fieldset>
</template>
<script lang="ts">
import {reactive, ref, computed, watch, watchEffect} from "vue";
export default {
setup() {
const user=reactive({
firstName:'东方',
lastName: '不败'
})
const fullName1=computed(()=>{
return user.firstName + '-' + user.lastName
})
const fullName2=computed({
get(){
return user.firstName + '-' + user.lastName
},
set(val){
const name=val.split('-')
user.firstName=name[0]
user.lastName=name[1]
}
})
// 监视属性
let fullName3=ref('')
watch(user,({firstName,lastName})=>{ // user里面对象解构赋值
fullName3.value=firstName + '-' +lastName
},{immediate:true}) // immediate 开始时执行一次 还可以加deep 深度监视
// watchEffect(()=>{
// fullName3.value=user.firstName + '-' +user.lastName
// }) // 更智能，开始就自动执行一次
watch([()=>user.firstName,()=>user.lastName],()=>{
console.log("watch执行了")
})
return {
user,
fullName1,
fullName2,
fullName3
}
}
}
</script>
到此这篇关于vue3响应式数据与watch属性的文章就介绍到这了,更多相关vue3 watch属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
