vue3

vue3/project3/src/App.vue

@@ -12,7 +12,7 @@
     <Demo8></Demo8>
     <Demo9></Demo9> -->
      <!-- <Demo14 v-if="isshow"></Demo14> -->
-     <Demo18></Demo18>
+     <Demo23></Demo23>
     <!-- <Demo10></Demo10>
     <Demo11></Demo11>
     <Demo12></Demo12>
@@ -57,6 +57,8 @@ import Demo15 from './components/Demo15.vue';
 import Demo16 from './components/Demo16.vue';
 import Demo17 from './components/Demo17.vue';
 import Demo18 from './components/Demo18.vue';
+import Demo19 from './components/Demo19.vue';
+import Demo23 from './components/Demo23.vue';
 let isshow  = ref(true);
 </script>
 <style>

vue3/project3/src/components/Demo19.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <h1>Demo8</h1>
+    <p>姓:
+        <input type="text" v-model="firstName">
+    </p>
+    <p>名:
+        <input type="text" v-model="lastName">
+    </p>
+    <button @click="setMain">设置</button>
+    
+    <h1>全称:{{ firstName + lastName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+    <h1>全称:{{ fullName }}</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,computed} from "vue" 
+let firstName = ref<string>("");
+let lastName = ref<string>("");
+// let fullName = computed<string>({
+//     get() {
+//         return firstName.value + lastName.value
+//     },
+//     set(val:string):void {
+//         let [x,y] = val.split('-');
+//         firstName.value = x;
+//         lastName.value = y;
+
+//     }
+// })
+let fullName = computed<string>(()=>{
+    return firstName.value + lastName.value
+})
+// function setMain():void {
+//     fullName.value = '糖-果'
+// }
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo20.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>第九个</h1>
+    <h2>Watch:监听ref定义的基本数据类型</h2>
+    <p>我有{{ flower }}朵花</p>
+    <button @click="changeReduce">减少</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch} from "vue" 
+let flower = ref<number>(10);
+function changeReduce():void {
+    flower.value -= 1;
+}
+watch(flower,(newValue:number,oldValue:number | undefined) => {
+    console.log(newValue,oldValue)
+},{
+    deep: true, //深度监听
+    immediate: true //立即执行
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo21.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h1>Watch:监听ref引用数据类型</h1>
+    <p>我在{{ obj.city }},现在是{{ obj.month }}</p>
+    <button @click="changeCity">修改城市</button>
+    <button @click="changeObj">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch} from "vue" 
+interface Main {
+    city: string,
+    month: string
+}
+let obj = ref<Main>({
+    city:'哈尔滨',
+    month:"8月"
+})
+function changeCity():void {
+    obj.value.city = '北京'
+}
+function changeObj():void {
+    obj.value = {
+        city:"天津",
+        month:'9月'
+    }
+}
+// 1.watch监听ref引用数据类型 监听的是整体 而不是单独的
+// 2.若监听ref引用数据类型中的属性 需要开启深度监听
+watch(obj,(newValue:Main,oldValue:Main | undefined)=>{
+    console.log(newValue,oldValue)
+},{
+    deep:true,
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo22.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h1>Watch:监听reactive引用数据类型</h1>
+   <p>我叫{{ obj.name }},今年{{ obj.age }}岁</p>
+   <button @click="changeName">修改名字</button>
+   <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive,watch} from "vue" 
+interface Person {
+    name:string,
+    age:number
+}
+let obj:Person = reactive({
+    name:"图图",
+    age:3
+})
+function changeName():void {
+    obj.name = '蜡笔小新';
+}
+function changePerson():void {
+    Object.assign(obj,{
+        name:'瑶一瑶',
+        age:4
+    })
+}
+// 监听reactive引用数据类型 可以监听到属性
+watch(obj,(newValue:Person,oldValue:Person | undefined)=>{
+    console.log(newValue,oldValue)
+},{
+    deep:true,
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo23.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>ts使用</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+import {type happy,type list} from '../types/demo23'
+function fn1<T extends happy>(a:T):T {
+    return a;
+}
+let newList:list = reactive([
+    {
+        name:'图图',
+        age: 103,
+        sex:'男'
+    }
+])
+fn1({jump:'qqq'})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/types/demo23.ts

@@ -0,0 +1,14 @@
+export interface happy {
+    jump: string
+}
+
+interface obj1 {
+    name:string,
+    age: number,
+    sex: string
+}
+
+
+
+
+export type list = obj1[];