当前位置：首页 > news >正文

Vue3（watch，watchEffect，标签中ref的使用,TS,props,生命周期）

news 2025/9/16 14:43:55

Vue3（watch，watchEffect，标签中ref的使用,TS,props,生命周期）

watch监视

情况三：监视reactive定义的对象类型的数据

监视reactive定义的对象类型的数据，默认开启深度监视。地址没变，新值和旧值相等。

在这里插入图片描述

情况四：监视ref/reactive定义的对象的某个属性

<template><div class="person"><h1>情况四：监视ref/reactive定义的对象的某个属性</h1><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>汽车：{{person.car.c1}}、 {{person.car.c2}}</h2><button @click="changeName">修改姓名</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改c1</button><button @click="changeC2">修改c2</button><button @click="changeCar">修改car</button></div>
</template><script lang="ts">export default {name:'Person',}
</script>
<script lang="ts" setup>
// 监视 引入watchimport {reactive,watch} from 'vue'let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})
function changeName(){person.name += '_'
}
function changeAge(){person.age += 1
}
// 方法
function changeC1 (){person.car.c1 = '奥迪'
}
function changeC2 (){person.car.c2 = '保时捷'
}
function changeCar (){person.car = {c1:'旅行者',c2:'长城'}
}
// 监视某一个属性
watch(()=>{return person.car.c1},()=>{console.log('c1被修改了')
})</script><style>.person {background-color: #f2f2f2;border-radius: 10px;box-shadow: 0 0 10px;padding: 20px;position: absolute;top: 200px;right: 20px;}
</style>

在这里插入图片描述

注意：监视的是对象里属性为对象时，使用函数式，注意开启deep

在这里插入图片描述

情况五：监视一个对象中的多个属性

在这里插入图片描述

watchEffect（自动监视）

在这里插入图片描述

标签中ref的使用

HTML标签中ref的使用

在这里插入图片描述

组件标签中ref的使用（defineExpose）

在这里插入图片描述

<!--局部样式-->
<style scoped>.person {background-color: #f2f2f2;border-radius: 10px;box-shadow: 0 0 10px;padding: 20px;position: absolute;top: 200px;right: 20px;}
</style>

TS中的接口、泛型、自定义类型

在这里插入图片描述

props的使用

在这里插入图片描述

生命周期（Vue2，Vue3）

Vue2:创建  created（beforeCreate创建前------完毕created）挂载	mounted（beforeMount挂前载------完毕mounted）更新	update（beforeUpdate更新前------完毕updated）销毁  Destory（beforeDestory销毁前------完毕Destoryed）
Vue3:自动创建onBeforeMount(()=>{//指定函数})omMounted(()=>{})onBeforeUpdate()onUpdated()onBeforeUnmount()onUnmount()