Vue3苦逼的学习之路

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

一：计算属性

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

TypeScript 复制代码

<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：计算属性，可读可写

TypeScript 复制代码

<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 = str1
        lastName.value = str2
    }
})
function changeName() {
    fullName_rw.value = '李-四'
}
</script>

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

二：watch属性

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

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

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

2、reactive定义的数据

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

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

关于watch一共有五种情况：

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

TypeScript 复制代码

<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定义的对象类型的数据

TypeScript 复制代码

<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定义的对象类型

TypeScript 复制代码

<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、若该属性值依然是【对象类型】，可直接编，也可写成函数，不过建议写成函数

TypeScript 复制代码

<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>

情况五：监视多个数据

TypeScript 复制代码

<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 })