(vue3)create-vue 组合式API

news/2025/2/19 3:19:57/

优势:

更易维护:组合式api,更好的TS支持

之前是选项式api,现在是组合式,把同功能的api集合式管理

复用功能封装成一整个函数

更快的速度

更小的体积

更优的数据响应式:Proxy

create-vue 新的脚手架工具,底层切换到了vite 

node -v检查node.js16.0以上

npm init vue@latest

vuter禁用(vue2的插件),启用volar

App.vue中script加上setup允许在script中直接编写组合式api

template中不再要求唯一根元素

组件不用注册

组合式API-setup

setup 执行时机比beforeCreate还早,获取不到this(以后不用this),this指向undefined

setup中数据或函数需要return,也麻烦,所以直接在script上写setup

<script setup>语法糖原理

 reactive()

接收一个对象,返回一个响应式对象

导入import {reactive} from ‘vue’            const state=reactive({})

reactive:只能接收对象。那简单类型?

ref()接收一个简单类型或者对象,返回一个响应式对象

import {ref} from ‘vue’             const count=ref(0)

在script区,需要加上.value,在template中,.value不用加

推荐:统一用ref()

computed计算属性函数

 异步请求,操作dom放watch

watch 侦听一个或多个数据的变化

导入import {watch} from ‘vue’ 

watch(
[count,nickname],//第一个参数位置放监视的ref对象
(newArr,oldArr)=>{//第二个参数位置放回调console.log(newArr,oldArr)
},{//第三个位置传入配置对象
immediate:true
deep:true
})
//(2) [0, 'lisa'] (2) [0, '张三']

immediate:true一进页面就触发

deep:true监视不到复杂对象内部变化,除非整个对象地址变了,比如一个新对象赋值给它,加上deep:true就监听得到了

如何精确侦听对象中某个属性

watch(()=>userInfo.value.age,//第一个参数处放函数,返回要侦听的具体属性
(newValue,oldValue)=>{
console.log(newValue,oldValue)})

注:作为watch函数的第一个参数,ref对象不需要添加.value

Vue3的生命周期

每调一个函数调配了一个小的生命周期逻辑

onmounted演示

以前往created里面写的直接写,以前写mounted里的写onmounted,可以写多次,不会冲突,按照顺序执行,以前写destroyed里的写onUnmounted

父子通信

vue2父传子,父给子绑属性,子props接收

vue3使用defineProps、defineEmits编译器宏

const props=defineProps({})子template中可以直接使用

vue3子传父子组件通过@绑定事件,子组件内部通过emit方法触发

const emit=defineEmits([‘changeMoney’]),然后template中某函数中emit(‘changeMoney’,5)然后父@changeMoney=“changeFn”

模版引用的概念

 通过ref标识获取真实的的dom对象或者组件实例对象

生成ref对象,通过ref标识绑定,.vaue即可访问到绑定的元素


http://www.ppmy.cn/news/1128997.html

相关文章

4、图像标签

4、图像标签 图像标签主要解决的是如何在网页中放一个图像 一、常见图片格式 JPGGIFPNGBMP 网页中用的最多的图片格式是JPG、PNG、GIF 二、图像标签 img <img src"path" alt"text" title"text" width"x" height"y"…

人员重识别:Person Re-Identification without Identification via Event Anonymization

论文作者&#xff1a;Shafiq Ahmad,Pietro Morerio,Alessio Del Bue 作者单位&#xff1a;Istituto Italino di Tecnologia;Universita degli Studi di Genova 论文链接&#xff1a;http://arxiv.org/abs/2308.04402v1 内容简介&#xff1a; 1&#xff09;方向&#xff1a;…

关于Blob链接的一些开发应用

一、什么是Blob链接 Blob链接是一种基于URL.createObjectURL(blob)生成的链接&#xff0c;可以将文件或数据的内容转换为URL的形式&#xff0c;方便进行下载或者展示。Blob链接可以是二进制数据、音频、视频、图像等。 二、Blob链接的生成方式 1. 创建Blob对象 // data为文件…

java进阶-Netty

Netty 在此非常感谢尚硅谷学院以及韩顺平老师在B站公开课 Netty视频教程 Netty demo代码文件 I/O 说NIO之前先说一下BIO&#xff08;Blocking IO&#xff09;,如何理解这个Blocking呢&#xff1f;客户端监听&#xff08;Listen&#xff09;时&#xff0c;Accept是阻塞的&…

一朵华为云,如何做好百模千态?

点击关注 文丨刘雨琦、郝鑫 2005年华为提出网络时代的“All IP”&#xff0c;2011年提出数字化时代的“All Cloud”&#xff0c;2023年提出智能时代的“All Intelligence”。 截至目前&#xff0c;华为的战略升级经历了三个阶段。 步入智能化&#xff0c;需要迎接的困难依然…

分式理想 对偶群 对偶空间

参考文献&#xff1a; Deitmar A. A first course in harmonic analysis[M]. 2005.Ideal quotient | encyclopedia article by TheFreeDictionaryFractional ideal | encyclopedia article by TheFreeDictionaryPontryagin duality | encyclopedia article by TheFreeDictiona…

win10默认浏览器改不了怎么办,解决方法详解

win10默认浏览器改不了怎么办&#xff0c;解决方法详解_蓝天网络 在使用Windows 10操作系统时&#xff0c;你可能会遇到无法更改默认浏览器的情况。这可能是因为其他程序或设置正在干扰更改。如果你也遇到了这个问题&#xff0c;不要担心&#xff0c;本文将为你提供详细的解决…

5.wifi开发【智能家居:上】,开发准备:智能开关灯,智能采集温湿,智能调彩灯

一。wifi智能家居项目开发 【开发准备1】&#xff1a;继电器控制开发 1.智能开关 器件准备&#xff1a;wifi&#xff08;esp8266&#xff0c;使用CP2102&#xff09;继电器 结果&#xff1a; 2.继电器工作原理 &#xff08;1&#xff09;继电器是一种自动电气开关 &#xff…