vue3学习1

news/2025/2/21 10:16:59

vite是新的官方构建工具,构建速度比webpack更快

vue项目的入口文件是index.html,一般在这里引入src/main.js,并且设置好容器#app

App.vue放的是根组件,components里放分支组件

vue组件中写三种标签,template & script & style

配置数据方式,放到data(){}中:

函数放到methods:{}中

以上配置项是vue2的写法,选项式API

vue3是组合式API,使用setup(){ 定义 + return },setup执行时间早于beforeCreate(),setup中没有this的定义,setup可以返回一个渲染函数

import setupExtend from 'vite-plugin-vue-setup-extend' 可以通过name属性指定组件名

setup语法糖,自动return:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

vue3响应式数据-ref包裹的数据是响应式数据(对象),reactive包裹对象类型的数据

Object.assign(obj1, obj2) 可以更新reactive定义的对象

toRefs可以把reactive定义的每一组key:value变成ref类型的变量

toRef从reactive中一个一个取,其中更改nl,reactive中的age也会变

计算属性computed(()=>{return}),计算依赖的数据变化,就会重新计算,computed是ref变量

以下是只读的写法

可读可写,get set方法:

vue3-watch(监听):

可以监听四种数据:

        1、ref定义的数据;

        2、reactive定义的数据;

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

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

vue2的watch写法:

vue3的watch写法,是一个函数,声明 监听对象和 回调函数(newValue, oldValue)

终止监听:

监听ref定义的对象类型的数据,监听的是对象的地址值,若想监听对象内部属性的变化,需要手动开启深度监听deep=true;想要立即监听,也要手动开启immediate=true ;

oldValue和newValue 也是监听的新老地址的值,若没变地址,则oldValue=newValue,大部分情况(监听对象地址不变)可以把newValue和oldValue合并成一个参数value。

reactive对象类型数据无法整体修改,必须通过Object.assign来修改

监听reactive对象类型数据,默认是开启深度监听的,隐式创建深层监听且无法关闭!

地址不变,则oldValue和newValue相同

监听对象中的某个值(基本类型的),需要构造getter函数,监听getter函数返回值

监听对象中的某个 子对象,可直接监听,也可以构造getter函数,

***建议写函数式,并加上deep=true(监听中最常用)

同时监视以上几种情况:

v-bind:value= 单向绑定(简写为:value=), v-modal:value= 双向绑定(简写为v-modal=)

v-for写法,v-bind:key=缩写成 :key=


http://www.niftyadmin.cn/n/5860681.html

相关文章

计算机网络基础杂谈(局域网、ip、子网掩码、网关、DNS)

目录 1. 简单局域网的构成 2. IP 地址 3. 子网掩码 4. IP地址详解自定义IP 5. IP 地址详解 6. 网关 7. DNS 域名解析 8. ping 1. 简单局域网的构成 交换机是组建局域网最重要的设备&#xff0c;换句话说&#xff0c;没有交换机就没法搭建局域网 交换机不能让局域网连…

从建模到展示,如何实现3D在线预览展示?

要实现3D模型的线上展示&#xff0c;这不仅仅是一个简单的上传和分享过程&#xff0c;而是一场将创意与技术完美融合的旅程。以下是详细且丰富的步骤指南&#xff0c;帮助你顺利完成这一任务&#xff1a; 一、创建3D模型 1、使用3D建模软件 选择专业工具&#xff1a;启动3ds …

软件单元测试的技术要求

文章目录 一、软件单元测试的概念二、测试对象三、测试目的四、进入条件五、测试内容六、测试环境七、测试实施方一、软件单元测试的概念 单元测试(Unit Testing),是指对软件中的最小可测试单元进行测试验证。单元测试是白盒测试,主要依据软件详细设计和软件代码进行,不仅…

STM32 SPI Flash读写实验手册

实验名称 基于SPI Flash的断电状态保存系统 实验目的 掌握SPI Flash的基本读写操作 实现设备状态断电保存功能 学习STM32 HAL库的SPI驱动开发 硬件要求 STM32开发板 按键 SPI Flash模块 杜邦线若干 面包板 硬件连接 SPI Flash引脚STM32引脚CLKSPI_SCK (PA5)DISPI_MIS…

神经网络八股(1)

1.什么是有监督学习&#xff0c;无监督学习 有监督学习是带有标签的&#xff0c;无监督学习是没有标签的&#xff0c;简单来说就是有监督学习的输入输出都是固定的&#xff0c;已知的&#xff0c;无监督学习输入是已知的&#xff0c;输出是不固定的&#xff0c;无监督学习是通…

DeepSeek 助力 Vue 开发:打造丝滑的点击动画(Click Animations)

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…

Dify平台搭建面试机器人

无代码搭建面试机器人 什么是Dify 什么是Dify Dify 是一款开源的大语言模型(LLM) 应用开发平台。它融合了后端即服务&#xff08;Backend as Service&#xff09;和 LLMOps 的理念&#xff0c;使开发者可以快速搭建生产级的生成式 AI 应用。即使你是非技术人员&#xff0c;也能…

【Linux】多线程 -> 线程同步与基于BlockingQueue的生产者消费者模型

线程同步 条件变量 当一个线程互斥地访问某个变量时&#xff0c;它可能发现在其它线程改变状态之前&#xff0c;它什么也做不了。 例如&#xff1a;一个线程访问队列时&#xff0c;发现队列为空&#xff0c;它只能等待&#xff0c;直到其它线程将一个节点添加到队列中。这…