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>
// 监视 引入watch
  import {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()