vue3学习1

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:

javascript 复制代码
<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=

相关推荐
kkkkkkkkkk_Z6 分钟前
新手自学嵌入式 | 学习日记:ARM内核启动代码、时钟系统(PLL/Prescaler/PFD)与IMX6ULL时钟配置
arm开发·学习
丁希希哇16 分钟前
强化学习与偏好学习基础:PPO,DPO,GRPO
人工智能·学习·机器学习·大语言模型
破壁者-燕20 分钟前
MLE 基础学习 Transformer
深度学习·学习·transformer
JWASX44 分钟前
【agent 开发】agent 开发学习 - LangChain(1)
python·学习·agent
星恒随风1 小时前
Linux进程基础(二):进程调度、上下文切换、O(1)调度器、环境变量与虚拟地址空间
linux·笔记·学习·状态模式
牧羊人.3331 小时前
动手学深度学习 06|学习率调整
人工智能·深度学习·学习
遇印记2 小时前
数据通信初步
运维·服务器·网络·windows·学习
陈年老古董2 小时前
Hive 文件格式与查询学习笔记
hive·笔记·学习
承渊政道2 小时前
Linux网络学习【UDP Socket编程实战:网络命令与客户端访问Linux验证】
linux·网络·学习·ubuntu·编程实战·udp socket
小O的算法实验室2 小时前
IEEE TEVC,知识与学习驱动人工蜂群算法+家庭医疗护理路径与调度
学习