Vue3（watch，watchEffect，标签中ref的使用,TS,props,生命周期）
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()