Vue3苦逼的学习之路

        从一名测试转战到全栈是否可以自学做到，很多朋友肯定会说不可能，或就算转了也是个一般水平，我很认同，毕竟没有经过各种项目的摧残，但是还是得踏足一下这个领域。所以今天和大家分享vue3中的相关内容，大佬勿喷。

一：计算属性

案例1：计算属性，且是只读

<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'
let firstName = ref('张')
let lastName = ref('三')// 计算属性，且是只读
let fullName = computed(() => {return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0, 1)
})
</script>

案例2：计算属性，可读可写

<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'
let firstName = ref('张')
let lastName = ref('三')// 计算属性，可读可写
let fullName_rw = computed({get() {return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0, 1)},set(val) {const [str1, str2] = val.split('-')firstName.value = str1lastName.value = str2}
})
function changeName() {fullName_rw.value = '李-四'
}
</script>

对于计算属性，一般与get()和set()一起使用

二：watch属性

作用：监视数据的变化，和vue2的watch租用一致

特点：vue3中的watch只能监视以下四种数据

        1、ref定义的数据【一个是基本类型，一个是对象类型】

        2、reactive定义的数据

        3、函数返回一个值(getter函数)

        4、一个包含上述内容的数组

关于watch一共有五种情况：

情况一：监视ref定义的基本数据类型

<template><div class="person"><h2>当前求和为：{{ sum }}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script lang="ts" setup name="Person1">
import { ref, watch } from 'vue'
// 定义数据
let sum = ref(0)function changeSum() {sum.value++
}
//监视ref定义的基本数据，这里监视的就是sum
const stopwatch = watch(sum, (newvalue, oldvalue) => {console.log(newvalue, oldvalue);//解除监视,当sum的值大于等于10时运行解除if (sum.value >= 10) {stopwatch()}
})</script>

情况二：监视ref定义的对象类型的数据

<template><div class="person"><h1>情况2：监视ref定义的对象类型</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改按钮</button><button @click="changePerson">修改整个人</button></div>
</template><script lang="ts" setup name="Person1">
import { ref, watch } from 'vue'
// 监视ref定义的对象类型，直接写数据名，监视的是对象的【地址值】，若想见识对象内部的数据，要手动开启深度监视
// immediate: true, 立即执行
// deep: true, 深度监视
let person = ref({name: 'alex',age: 18
})
// 方法
function changeName() {person.value.name += '~'
}
function changeAge() {person.value.age++
}
function changePerson() {person.value = {name: '李四',age: 20}
}
//监视ref定义的【对象类型】数据，监视的是对象的地址值
watch(person, (newvalue, oldvalue) => {console.log(newvalue, oldvalue);
}, { deep: true, immediate: true })
/*
注意：
1、如果修改的是ref定义的对象中的属性，newvalue和oldvalue都是新值，因为它们是同一个对象
2、如果修改整个ref定义的对象，newvalue是新值，oldvalue是旧值，因为不是同一个对象了
*/
</script>

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

<template><div class="person"><h2>情况3：监视reactive定义的对象类型</h2><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName1">修改名字</button><button @click="changeAge1">修改按钮</button><button @click="changePerson1">修改整个人</button></div>
</template><script lang="ts" setup name="Person1">
import { ref, watch, reactive } from 'vue'//情况三：监视reactive定义的对象类型数据，且默认开启深度监视
function changeName1() {person1.name += '~'
}
function changeAge1() {person1.age++
}
//reactive不能整体修改，所以下面是无法执行的
function changePerson1() {// person1 = {//     name: '李四',//     age: 20// }//下面是强制修改，但是不是把整个对象修改Object.assign(person1, {name: '李四111',age: 28})
}
//监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
watch(person1, (newvalue, oldvalue) => {console.log('person1变化了');console.log(newvalue, oldvalue);
})
</script>

情况四：监视ref或reactive定义的【对象类型】数据中的某个属性

1、若该属性值不是【对象类型】，需要写成函数形式

2、若该属性值依然是【对象类型】，可直接编，也可写成函数，不过建议写成函数

<template><div class="person"><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="changeCar1">修改第一台车</button><button @click="changeCar2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person1">
import { reactive, watch } from 'vue'
//数据
let person = reactive({name: "张三",age: 18,car: {C1: '奔驰',C2: '宝马'}
})
// 监视响应式对象中的某个属性，且该属性是基本类型，要写成函数式
watch(() => person.name, (newvalue, oldvalue) => {console.log('person.name变化了', newvalue, oldvalue);
},{deep:true})
</script>

情况五：监视多个数据

<template><div class="person"><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="changeCar1">修改第一台车</button><button @click="changeCar2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person1">
import { reactive, watch } from 'vue'
//数据
let person = reactive({name: "张三",age: 18,car: {C1: '奔驰',C2: '宝马'}
})
// 如果是对象之类的，就不用改为函数式了，比如：person.car
watch([() => person.name, () => person.car.C1, person.car], (newvalue, oldvalue) => {console.log('改动了', newvalue, oldvalue);}, { deep: true })