Vue3学习（一）

🕗 发布于 2024-10-09 16:58 vue.js 前端

组合式API

选项式api是将同一类选项放在一起，比如，所有data放在一起，methods放在一起。这种方式来说，各个功能上来说，各个功能的data和methods都混在一起了，比如功能1的data和功能2的data混在一起，功能1的methods和功能2的methods混在一起，就会显得很混乱，不易于维护。

组合式api是将同一类功能放在一起。比如功能1的data和功能1的methods放在一起，功能2的data和功能2的methods也放一起，按功能来组合。达到功能高内聚的效果，易于维护。

setup函数语法糖

原始的setup函数，要在函数中定义大量数据后，再将这些数据一个一个return返回

<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }
 
    return { msg , say}
  }
}
</script>

数据多的情况下，看起来就会很乱，而且return语句中会很不好看，于是有了setup函数语法糖：

<script lang="ts" setup>
   
    let name = "二狗";
    let age = 20;
    let tel = "18888888888";
    let introduction = "一定要成为编程大牛";

function changeAge() {
    age += 1;
    console.log(age);
}

function showIntroduction() {
    introduction = "一定要成为编程大牛！！！";
    console.log(introduction);
}
</script>

这时的在script标签中的数据默认就当作全都return返回了。

响应式

ref

如果要让一个数据变成响应式的，就要让这个数据在定义的时候被ref函数包裹后再赋值给变量（要先从vue中引入ref函数）。这时的变量是一个RefImpl类型的了，要对原来的数据进行修改，要使用变量.value 的方式，对这个value进行修改。

<script lang="ts" setup>
import { ref } from 'vue';

    let name = ref('张三')
    let age = ref(18)
    function changeName(){
        name.value = '二狗'
    }
    function addAge(){
        age.value++
    }
</script>

ref定义对象类型数据：（底层其实使用了reactive）

    let car2 = ref({brand:'宝马',price:100})
    function changePrice2(){
        car2.value.price += 20;
    }

    let chiikawa2 = ref([
        {id:1,name:'吉伊',color:'白馒头'},
        {id:2,name:'小八',color:'蓝裤衩头白猫'},
        {id:3,name:'小八',color:'黄色怪叫兔'}
    ])
    function change537_2(){
        chiikawa2.value[2].name = "乌萨奇"
    }

reactive

对象类型的数据，要包裹在reactive函数中再赋值给变量，此时的变量是一个代理对象，Proxy类型的。响应式后要更改对象的属性，就不是.value了，而是直接更改。

<script lang="ts" setup>
    import { ref, reactive } from 'vue';
    let car = reactive({brand:'奔驰',price:100})

    let chiikawa = reactive([
        {id:1,name:'吉伊',color:'白馒头'},
        {id:2,name:'小八',color:'蓝裤衩头白猫'},
        {id:3,name:'小八',color:'黄色怪叫兔'}
    ])

    function changePrice(){
        car.price += 20;
    }

    function change537(){
        chiikawa[2].name = "乌萨奇"
    }
</script>

reactive只能用来定义对象类型的响应式数据。

ref和reactive总结

ref创建的变量必须要用.value的方式去获取和修改数据
reactive重新分配一个新对象，会失去响应式，要想不失去响应式，可以使用Object.assign(变量名,新对象) 的方式，给目标变量一个新的对象值。
若需要一个基本类型的响应式数据，必须使用ref，若需要一个响应式对象，层级不深，ref和reactive都可以，若需要一个响应式对象，且层级较深，推荐使用reactive。

toRefs和toRef

如果要将对象中的数据解构取出使用，就要使用toRefs和toRef函数。

    import { ref, reactive, toRefs ,toRef} from 'vue';
    let car = reactive({brand:'奔驰',price:100})

    let {brand,price} = toRefs(car)
    let nl = toRef(car,'brand')

提取单个属性值，使用toRef，提取多个属性值，使用toRefs

计算属性

定义：如果一个要用的数据，而是由已有的属性（data中的属性）计算得来，那么可以将其作为计算属性

计算属性的变量也是一个ref的值，只要参与计算属性的值的计算的某个变量发生了变化，计算属性的值也会实时更新。

<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    全名：<span>{{fullName}}</span><br>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

    let firstName = ref('zhang')
    let lastName = ref('san')

    let fullName = computed(() => {
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    })
</script>

如果是要定义可读可写的计算属性：

     let fullName2 = computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        },
        set(val){ //val参数就是此计算属性新修改的值
            const x = val.split('-')
            firstName.value=x[0]
            lastName.value=x[1]
        }
    })

    function changeFullName(){
        fullName2.value = 'li-si'
    }

watch监视

监视即在发现数据发生变化的时候，要进行某些逻辑。

在vue3中，watch只能监视以下四种数据：

ref定义的数据、reactive定义的数据、函数返回一个值（getter）、一个包含上述内容的数组。

<template>
  <div>
    <h2>sum的值为：{{ sum }}</h2>
    <button @click="addSum">加一</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

    let sum = ref(0)
    function addSum(){
        sum.value++
    }
    //监视
    watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了')
    })
</script>

如果想要解除监视，可以用一个变量接收watch返回的值，它返回的值是一个函数，当调用这个函数后，就会结束对应的监视。

    function addSum(){
        sum.value++
        if(sum.value >= 10){
            stop()
        }
    }
    //监视
    const stop = watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了')
    })

监视对象类型的数据

若要监视对象类型的数据，通常要加入第三个参数，这个参数用于指定一些配置项，比如：是否深度监视（即检测到对象的属性的变化），是否在初始化的时候立即执行一次，等等。

<script lang="ts" setup>
  import { ref,watch } from 'vue';
    let person = ref({
        name:'张三',
        age:18
    })

    function changeName(){
        person.value.name += '~'
    }

    function changeAge(){
      person.value.age++
    }

    function changePerson(){
      person.value = {name:'李四',age:19}
    }

    watch(person,(newValue,oldValue)=>{    //要想设置为对监视的对象类型的数据的深度监视，要加配置项
      console.log('person变化了',newValue,oldValue)
    },{//第三个参数用于加其他配置项
      deep:true,//开启深度监视
      immediate:true//一来的时候先执行一次监视的函数中要执行的操作
    })
</script>

此处的oldValue如果是直接改整个对象，oldValue就是之前的对象值。如果改的是对象的属性，oldValue和newValue是同一个值，因为还是同一个对象。

如果是使用reactive定义的对象类型的数据，默认是自动开启深度监视的

<script lang="ts" setup>
  import { reactive,watch } from 'vue';
    let person = reactive({
        name:'张三',
        age:18
    })

    function changeName(){
        person.name += '~'
    }

    function changeAge(){
      person.age++
    }

    function changePerson(){
      Object.assign(person,{name:'李四',age:19})
    }

    watch(person,(newValue,oldValue)=>{ //reactive定义的对象类型的数据被监视的时候，默认是开启深度监视的
      console.log('person变化了',newValue,oldValue)
    })
</script>

如果只想监视对象的其中一个基本类型的属性，第一个参数写作一个getter函数，并且此时的监视，由于检测的是具体的属性，而不是对象。所以修改的时候，oldValue参数的值就是修改前的值

<script lang="ts" setup>
  import { reactive,watch } from 'vue';
    let person = reactive({
      name:'张三',
      age:18,
      car:{
        brand:'奔驰',
        color:'red'
      }
    })

    function changeName(){
      person.name += '~'
    }
    function changeAge(){
      person.age++
    }
    function changeCarBrand(){
      person.car.brand = '宝马'
    }
    function changeCarColor(){
      person.car.color = 'green'
    }
    function changeCar(){
      person.car = {brand:'迈巴赫',color:'black'}
    }

    watch(()=>{return person.age},(newValue,oldValue)=>{
      console.log('年龄变化为'+newValue+','+'旧值为'+oldValue)
    })
</script>

如果要监视的对象a的属性还是一个对象b，如果直接写该属性作为第一个参数，也可以监视到其对象b的属性值的变化。但是如果对象b的整个对象值发生变化的时候，不能监视到。

所以，建议此对象b的监视也写作getter函数的形式作为第一个参数。但是此时要监视对象b的属性值的变化，要使用深度监视，也就是加上第三个参数配置项中的deep为true

watch(()=>person.car,(newValue,oldValue)=>{
      console.log('person.car发生变化了',newValue,oldValue)
    },{deep:true})

如果要如此局部监视多个指定的属性，可以写作一个数组的方式

watch([()=>person.age,()=>person.car.color],(newValue,oldValue)=>{
      console.log('发生变化了',newValue,oldValue)
},{deep:true})

WathEffect监视

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时，重新执行该函数

就是在函数中用到了那些数据，就检测那些数据，案例：

<template>
  <div class="person">
    <h2>需求：当水温达到60度，或者水位达到80cm的时候，给服务器发请求</h2>
    <h2>当前水温：{{ temp }}℃</h2>
    <h2>当前水位：{{ height }}cm</h2>
    <button @click="changeTemp">改变温度</button>
    <button @click="changeHeight">改变高度</button>
  </div>
</template>

<script lang="ts" setup>
    import {ref,watch, watchEffect} from 'vue';
    let temp = ref(10);
    let height = ref(0);

    function changeTemp(){
        temp.value += 10
    }

    function changeHeight(){
        height.value += 10
    }

    //watch实现
    watch([temp,height],(newValue)=>{
      let [newTemp,newHeight] = newValue
      if(newTemp >= 60 || newHeight >=80){
        console.log('给服务器发请求')
      }
    })

    //watchEffect实现
    watchEffect(()=>{
      if(temp.value >= 60 || height.value >= 80){
        console.log('给服务器发请求')
      }
    })
</script>

关于ref属性

被用来给元素或子组件注册引用信息（id的替代者）
引用在html标签上，获取到的是真实的DOM元素；应用在组件标签上，获取到的是组件的实例对象
使用方式：
- 在相应的标签上，给上ref属性。
- 获取：let xxx = ref()，其中xxx指的是相应的标签的ref属性的属性值。
但是获取到的组件实例对象默认是受保护的，要是想向外暴露对应的实例对象中的属性，就使用defineExpose函数在组件中将对指定的属性暴露出去：defineExpose({属性,属性,……})

关于props的使用

要是子组件的某个属性想要由父组件来决定，以达到更好的复用效果。就要使用props属性

定义props属性：

<template>
  <h2>
    {{ a }}
  </h2>
</template>

<script lang="ts" setup>
    import { defineProps } from 'vue';
    //接收a
    let x = defineProps(['a'])
    console.log(x)

</script>

在defineProps函数中，定义的属性可以直接由template引用（如上方的a），但是不能直接在script中使用，要用一个变量接收后再到script中使用

父组件：

<PropsLearning a="你好"></PropsLearning>

如果是想引用父组件中的某个变量，比如有一个变量let hello:string = ‘你好’，就要在相应的props属性前加上 : ，表示将属性值 ” ” 中的内容解析为表达式。

如果想要限制props的类型，可以使用泛型的方式，写法如下：

defineProps<{b:string}>()

如果想要让b可有也可无，就在b后面加上一个?，例：

defineProps<{b?:string}>()

如果还想让其在不传值的时候，有一个默认值，要引入withDefaults函数：

import { defineProps,withDefaults } from 'vue';

    // 定义组件的props，包括a和c+d，并设置c和d的默认值
    const props = withDefaults(defineProps<{
      a?: string; // 可选的字符串类型的prop
      c?: string; // 可选的字符串类型的prop
      d?: number; // 可选的数字类型的prop
    }>(), {
      c: 'hello', // 设置默认值
      d: 100, // 设置默认值
    });

如果要给默认值的属性是数组或者对象类型的，要使用箭头函数返回其要赋的值

Vue3生命周期

1、setup() : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

自定义Hooks

hooks用于将功能分离出到相应的ts文件中，组件要引入相应的功能的时候，引入相应的hooks的ts文件即可，更符合高内聚低耦合的理念。

例：

组件：

用解构表达式将相应的ts文件中导出的内容引用到组件中。

<template>
  <div class="person">
    <h2>当前求和为{{ sum }}</h2>
    <button @click="add">点我sum+1</button>
    <hr>
    <img v-for="(dog,index) in dogList" :src="dog" :key="index">
    <button @click="getDog">再来一只小狗</button>
  </div>
</template>

<script lang="ts" setup>
    import useDogs from '@/hooks/useDogs';
    import useSum from '@/hooks/useSum';
    const {sum,add} = useSum()
    const {dogList,getDog} = useDogs()
</script>

<style>
    img{
        height: 100px;
        margin-right: 10px;
    }
</style>

hooks中的useDogs.ts：

ts数据要使用export导出，将要导出的数据封装为对象的形式return出去。

import { ref,reactive } from 'vue';
import axios from 'axios';

export default function(){
    //数据
    let dogList = reactive([
        '<https://images.dog.ceo/breeds/kombai/Kombai-indian-Dog.jpg>'
    ])
    //方法

    async function getDog(){
        try{
            let result = await axios.get('<https://dog.ceo/api/breeds/image/random>')
            dogList.push(result.data.message)
        }catch(error){
            alert(error)
        }
    }

    
    return {dogList,getDog}
}

hooks中的useSum.ts：

import { ref,reactive } from 'vue';
import axios from 'axios';
export default function(){
    //数据
    let sum = ref(0)
    //方法
    function add(){
        sum.value++
    }
    return {sum,add}
}

原文地址：https://blog.csdn.net/2302_79468488/article/details/142753018

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Springboot配置优先级
下一篇：八字命理测算系统开发-源码搭建

普通程序员如何掌握大模型（LLM）：全面学习路线与知识体系，非常详细收藏我这一篇就够了
原谅我的后知后觉，才开始从头写，我是已经上了一阶段大模型的课，也搜集了些资料，并自己做了小部分实践，回过头来，才想开始整理些文章。起初，大家都在写，都在发，我那会在焦虑。自chatgpt爆火以来，AI
阅读更多2024-10-09
新硬盘第一次使用需要怎样做？
虽然硬盘通常在出厂时是全新的，检查一下硬盘的健康程度也是有必要的，因为这样可以确保硬盘没有潜在的缺陷或问题，避免未来数据丢失的风险。首先，要把准备安装硬盘的电脑关机，最好是把电脑也完全切断。如果自己的
阅读更多2024-10-09
源代码如何才能防泄漏？总结十点注意事项
同时，启用托管平台的日志审计功能，监控所有的代码变动记录，确保代码在托管过程中的安全。4. **定期进行代码审计**：通过自动化的代码审计工具和人工审查相结合，企业可以识别出异常的代码活动，防止恶意行
阅读更多2024-10-09
[vue/no-use-v-if-with-v-for] v-for 和 v-if 在同一个元素中的处理方法
在同一个元素上是反模式（antipattern），因为这会导致额外的 DOM 元素渲染和更新，从而影响性能。Vue 建议将数据过滤逻辑放在组件内部处理，而不是在模板中处理。因此，当需要根据某些条件过滤
阅读更多2024-10-09
计算机毕业设计基于Python的智能停车管理系统的设计与实现 Python+Django+Vue 前后端分离附源码讲解文档
本文介绍了一款基于Python的智能停车管理系统，该系统通过实时监控停车位和智能引导驾驶员停车，旨在提高城市停车管理效率和驾驶员停车体验。系统的主要功能包括车位信息管理、预订信息管理、违规记录管理、缴
阅读更多2024-10-09
单路测径仪的详细介绍
蓝鹏测控单路测径仪以光电检测为核心，结合单片机、LED灯、透镜组、CCD芯片、光阑、滤光镜片等精密元件，组成了一个高效的检测系统。具体来说，发射镜头内点光源发出的光通过发射透镜形成平行光视场射向接收镜
阅读更多2024-10-09
架设传奇SF时提示此服务器满员，GEE引擎点开始游戏弹出服务器满员的解决方法
他折腾了半天，一直没进游戏，我当时测试这个版本时并没有这个提示，当然我测试的是单机，于是远程连上服务器看了下，最终找到问题所在，以下和大家说一下解决方法，下次有朋友碰到的时候希望能顺利解决。打开之后我
阅读更多2024-10-09
网络防火墙的主要功能及其弊端
综上所述，网络设置防火墙的重要性不言而喻。防火墙不仅能够防止未授权的访问、阻止恶意软件的传播、防止数据泄露等安全威胁。同时，还能够应对复杂的网络环境。因此，我们应该重视防火墙的设置和管理，在企业当中应
阅读更多2024-10-09
汽车车轮平衡块行业前景：预计2030年全球市场规模将达到10亿美元
汽车车轮平衡块，也称为轮胎平衡块，是一种安装在车轮上的配重部件。许多国家的监管机构都制定了汽车安全标准，其中包括对平衡车轮的要求，从而推动了对车轮平衡重物的需求。环保型车轮平衡重物的开发：由锌、钢和复
阅读更多2024-10-09
鸿蒙NEXT开始公测，哪些机型可以升级？鸿蒙版微信界面简洁
此外从微信鸿蒙测试版的界面截图来看，鸿蒙版的微信 App 界面非常简洁干净。此外，对大家很关心的微信 App 适配鸿蒙 NEXT 系统问题，腾讯公司公关总监于今日发布了回应，表示“微信鸿蒙原生版今日起
阅读更多2024-10-09