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 })
相关推荐
百锦再18 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
飞翔的佩奇21 小时前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
百锦再3 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code3 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16883 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员3 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_3 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte4 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj13 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D13 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台