当前位置: 首页 > news >正文

Vue3_vite

使用Vue-cli创建

使用vite创建

Composition API 组合API

setup

1.Vue3中的一个新的配置项,值为一个函数

2.可以将组件中所用到的数据,方法等配置在setup中.

3.setup函数的两种返回值

        3.1若返回一个对象,则对象中的属性,方法,在模板中均可以直接使用.

        3.2若返回一个渲染函数,则可以自定义渲染内容.

注意:Vue2.0配置(data,methos,computed,...)中可以访问到setup中的属性,方法.但在setup中不能访问(data,methos,computed,...).如果有重名,setup优先

执行时机

在beforeCreate生命周期前执行一次,this是undefined

setup的参数

  • props:值为对象,包含父组件传递过来,且组件内部生命接收了的属性。
    • export default {props:['name','id'],emits:['事件名称'],setup(props,context){// props:{name:'',id:''}console.log(props)}
      }
  • context:上下文对象
    • attrs:值为对象,包含父组件传递过来但没有在props配置中声明的属性,相当于Vue2的this.$attrs.
    • slots:收到的插槽内容,相当于Vue2的this.$slots.Vue3中的具名插槽要用v-slot:name
    • emit:分发自定义事件的函数,相当于Vue2的this.$emit.(需要再emits配置中声明)

ref函数

定义一个响应式数据

const xxx = ref(initValue)

创建一个包含响应式数据的引用对象(RefImpl)

JS中操作数据:xxx.value

模板中读取数据不需要.value

备注:

  1. 接收的数据可以是:基本数据类型,也可以是对象类型
  2. 基本数据类型:响应式依然是用Object.defineProperty()的get与set完成的.

reactive函数

  1. 定义一个对象类型的响应式数据
  2. const 对象 = reactive(对象),接收一个对象或数组,返回一个代理对象(Proxy对象)
  3. reactive定义的响应式数据是"深层次的"
  4. 基于ES6的Proxy实现,通过代理对象操作源对象内部数据都是响应式的.

Vue3.0中的响应式原理

Vue2的响应式

  • 实现原理 

         对象类型:通过Object.defineProperty()对属性的读取,修改进行拦截(数据劫持).

        数组类型:通过重写更新数组的一系列方法来实现拦截.(对数组的变更方法进行了包裹).

  • 存在问题

        新增属性,删除属性,界面不会更新.(可以使用this.$set()和this.$delete())

        直接通过下标修改数组元素,界面不会更新.(通过splice修改数组元素) 

Vue3的响应式

  •  实现原理

  • 通过Proxy(代理):拦截对象中任意属性的变化,包括属性值的读写,属性的添加,属性的删除。

  • 通过Reflect(反射):对被代理对象的属性进行操作。

new Proxy(data,{// 拦截读取属性值get(target,propertyName){// target 源对象// propertyName 属性名return Reflect.get(target[propertyName])},set(target,propertyName,value){// value 修改的值return Reflect.set(target,propertyName,value)},deleteProperty(target,propertyName){return Reflect.deleteProperty(target[propertyName])}
})

计算属性与监视

computed函数

相关文章:

Vue3_vite

使用Vue-cli创建 使用vite创建 Composition API 组合API setup 1.Vue3中的一个新的配置项,值为一个函数 2.可以将组件中所用到的数据,方法等配置在setup中. 3.setup函数的两种返回值 3.1若返回一个对象,则对象中的属性,方法,在模板中均可以直接使用. 3.2若返回一个渲染函数…...

python-字符串去掉空格的常见方法

python提供了去掉字符串空格的方法,可以满足大部分需求。 但在实际应用中,还需要灵活借助python其他方法,来实现字符串空格的删除。 比如,去掉字符串的全部空格、字符串连续空格保留一个等,都需要结合其他的方法来实现…...

如何写出一个成熟的线上线下结合的营销方案?

分享一下咱们案例库里策划的一个线上线下结合的活动的案例。 这个活动是为了推广一个新品牌,增加品牌知名度和用户粘性。 你可以根据以下几个要点来进行活动策划: 1、目标: 让目标用户了解并喜欢新品牌,激发用户参与和分享&am…...

Vc - Qt - “扩张“的窗口

该示例演示了一个"扩张的窗口"&#xff0c;主窗口的布局为水平布局&#xff0c;内置两个子窗口&#xff0c;采用定时器设置左边窗口的宽度&#xff0c;达到控制"扩张"的目的。 #include <QApplication> #include <QWidget> #include <QHBox…...

vue学习-02vue入门之组件

删除Vue-cli预设 在用户根目录下(C:\Users\你的用户名)这个地址里有一个.vuerc 文件,修改或删除配置 组件 Props(组件之间的数据传递) Prop 的大小写 (camelCase vs kebab-case)不敏感Prop 类型: String Number Boolean Array Object Date Function Symbol传递静态或动态 Pr…...

解决Pycharm使用Conda激活环境失败的问题

Q:公司电脑终端使用powershell来激活conda环境时报错? 同时手动打开powershell报"profile.ps1” 无法被加载的错误 A: 1,手动打开powershell&#xff0c;设置管理员打开 2,打开powershell 打开 PowerShell 终端&#xff0c;并输入以下命令&#xff1a;Get-ExecutionPo…...

SpringSecurity 核心组件

文章目录 SpringSecurity 结构组件&#xff1a;SecurityContextHolder组件&#xff1a;Authentication组件&#xff1a;UserDetailsService组件&#xff1a;GrantedAuthority组件总结 SpringSecurity 结构 在SpringSecurity中的jar分为4个&#xff0c;作用分别为 jar作用spri…...

【Vue】快速入门和生命周期

目录 前言 一、vue的介绍 1. Vue.js是什么&#xff1f; 2. 库和框架的区别 3.基本概念和用法&#xff1a; 二、MVVM的介绍 1. 什么是MVVM&#xff1f; 2. MVVM的组成部分 3. MVVM的工作流程 4. MVVM的优势 5. MVVM的应用场景 三、vue实例 1.模板语法&#xff1a; …...

JVM架构和内存管理优化

Java虚拟机&#xff08;JVM&#xff09;是Java编程语言的核心组件&#xff0c;负责执行Java字节码并提供运行时环境&#xff0c;使得Java程序可以在不同的平台上运行。了解JVM的工作原理和内存管理对于优化代码性能和理解Java的内存管理和垃圾收集机制非常重要。在本文中&#…...

C语言——贪吃蛇小游戏

目录 一、ncurse 1.1 为什么需要用ncurse&#xff1a; 1.2 ncurse的输入输出&#xff1a; 1.2.1 如何使用ncurse&#xff1a; 1.2.2 编译ncurse的程序&#xff1a; 1.2.3 测试输入一个按键ncurse的响应速度&#xff1a; 1.3 ncurse上下左右键获取&#xff1a; 1.3.1 如…...

PHP8中获取并删除数组中第一个元素-PHP8知识详解

我在上一节关于数组的教程&#xff0c;讲的是在php8中获取并删除数组中最后一个元素&#xff0c;今天分享的是相反的&#xff1a;PHP8中获取并删除数组中第一个元素。 回顾一下昨天的知识&#xff0c;array_pop()函数将返回数组的最后一个元素&#xff0c;今天学习的是使用arr…...

EtherCAT 总线型 4 轴电机控制卡解决方案

 技术特点  支持标准 100M/s 带宽全双工 EtherCAT 总线网络接口及 CoE 通信协议一 进一出&#xff08;RJ45 接口&#xff09;&#xff0c;支持多组动态 PDO 分组和对象字典的自动映射&#xff0c;支持站 号 ID 的自动设置与保存&#xff0c;支持 SDO 的电机参数设置与…...

Upload-labs十六和十七关

目录 第十六关第十七关 第十六关 直接上传php文件判断限制方式&#xff1a; 同第十五关白名单限制 第十六关源码&#xff1a; 代码逻辑判断了后缀名、content-type&#xff0c;以及利用imagecreatefromgif判断是否为gif图片&#xff0c;最后再做了一次二次渲染 第71行检测…...

软件包的管理

概念 在早期Linux系统中&#xff0c;要想在Linux系统中安装软件只能采取编译源码包的方式进行安装&#xff0c;所以早期安装软件是一件非常困难、耗费耐心的事情&#xff0c;而且大多数服务程序仅提供源代码&#xff0c;还需要运维人员编译后自行解决软件之间的依赖关系。所以…...

常见入门级进销存系统合集

进销存系统是企业管理中不可或缺的一环&#xff0c;它们可以帮助企业有效管理库存、销售和采购等关键业务。然而&#xff0c;对于初创企业和小型企业来说&#xff0c;选择一个合适的进销存系统可能是一项挑战。在这篇文章中&#xff0c;我们将探讨入门级和资深级进销存系统之间…...

爬虫逆向实战(32)-某号店登录(RSA、补环境、混淆)

一、数据接口分析 主页地址&#xff1a;某号店 1、抓包 通过抓包可以发现登录接口是/publicPassport/login.do 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现&#xff0c;有三个加密参数&#xff1a;username、password、captchaTok…...

正则表达式学习和高级用法

以下所有的验证都在 在线验证 1. 起始符 / 正则表达式的起始符2. 限定符 匹配前面的子表达式**1次或多次**。例如&#xff0c;zo 能匹配 "zo" 以及"zoo"&#xff0c;但不能匹配 "z"。等价于 {1,}。 ? 匹配前面的子表达式**0次或1次**。例如…...

C# Onnx Yolov8 Fire Detect 火焰识别,火灾检测

效果 项目 代码 using Microsoft.ML.OnnxRuntime.Tensors; using Microsoft.ML.OnnxRuntime; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using Syste…...

线程安全问题

目录 一、线程安全 二、线程安全问题 三、线程安全 1.同步代码块 2.同步方法 3.Lock锁 3.1常用方法&#xff1a; 3.2 死锁 3.3 练习&#xff1a; 四、生产者和消费者&#xff08;线程通信问题&#xff09; 一、线程安全 如果有多个线程在同时运行&#xff0c;而这些…...

【力扣每日一题】2023.9.18 打家劫舍Ⅲ

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 今天是打家劫舍3&#xff0c;明天估计就是打家劫舍4了。 今天的打家劫舍不太一样&#xff0c;改成二叉树了&#xff0c;不过规则没有变&…...

ESP32开发实战:5分钟搞定MicroPython调用C库驱动LED(附完整代码)

ESP32混合编程实战&#xff1a;用MicroPython调用C库实现高性能LED控制 在物联网设备开发中&#xff0c;ESP32凭借其出色的性价比和丰富的功能接口成为硬件开发者的首选。而MicroPython作为嵌入式领域的Python实现&#xff0c;以其简洁的语法和快速的开发周期赢得了大量开发者的…...

TuShare实战(二)高效构建多股数据面板

1. 为什么需要多股数据面板 做量化投资的朋友都知道&#xff0c;数据准备是最基础也最耗时的环节。想象一下&#xff0c;你正在研究一个投资策略&#xff0c;需要同时分析5只股票的历史走势。如果每次都要单独获取、整理每只股票的数据&#xff0c;那效率实在太低了。这就是为什…...

AgentCPM深度研报助手10分钟快速部署教程:基于CSDN星图GPU平台

AgentCPM深度研报助手10分钟快速部署教程&#xff1a;基于CSDN星图GPU平台 你是不是也遇到过这种情况&#xff1f;面对海量的行业报告、公司财报&#xff0c;想快速提炼核心观点&#xff0c;却感觉无从下手&#xff0c;或者需要花费大量时间手动整理。现在&#xff0c;有了AI助…...

CentOS 7下OnlyOffice离线部署全攻略:从依赖包下载到一键配置(避坑指南)

CentOS 7下OnlyOffice离线部署全攻略&#xff1a;从依赖包下载到一键配置&#xff08;避坑指南&#xff09; 在企业内网或安全隔离环境中部署文档协作平台时&#xff0c;OnlyOffice凭借其开源特性和丰富的编辑功能成为首选方案。本文将深入探讨如何在CentOS 7系统中实现完全离线…...

滞回比较器设计实战:从理论到参数优化

1. 滞回比较器基础&#xff1a;从门铃到航天器的抗噪神器 第一次接触滞回比较器是在大学电子设计课上&#xff0c;当时教授用一个生动的例子开场&#xff1a;"想象你家的门铃——如果它对任何风吹草动都响个不停&#xff0c;你会疯掉&#xff1b;但如果连用力敲门都没反应…...

5分钟掌握League Akari:英雄联盟玩家的智能助手终极指南

5分钟掌握League Akari&#xff1a;英雄联盟玩家的智能助手终极指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Akari…...

基于springboot的旅游景点门票信息系统设计与实现-vue

目录 技术栈选择系统模块划分数据库设计接口设计规范前端实现要点安全措施部署方案开发流程测试计划扩展功能预留 项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作 技术栈选择 后端采用Spring Boot框架&#xff0c;提供RESTful…...

RetinaFace效果展示:高精度人脸检测与关键点定位案例

RetinaFace效果展示&#xff1a;高精度人脸检测与关键点定位案例 1. RetinaFace模型核心能力解析 RetinaFace作为当前最先进的人脸检测算法之一&#xff0c;在精度和效率方面都达到了业界领先水平。这个基于ResNet50构建的模型能够同时完成三项关键任务&#xff1a; 人脸检测…...

卡尔曼滤波+LQR实战:用Python手写一个LQG控制器(附Jupyter Notebook)

卡尔曼滤波LQR实战&#xff1a;用Python手写一个LQG控制器&#xff08;附Jupyter Notebook&#xff09; 在机器人控制和自动化系统设计中&#xff0c;LQG&#xff08;Linear Quadratic Gaussian&#xff09;控制是一种经典且强大的控制策略。它巧妙地将卡尔曼滤波的状态估计能力…...

AutoDock Vina特殊金属元素对接技术指南:从问题诊断到方案落地

AutoDock Vina特殊金属元素对接技术指南&#xff1a;从问题诊断到方案落地 【免费下载链接】AutoDock-Vina AutoDock Vina 项目地址: https://gitcode.com/gh_mirrors/au/AutoDock-Vina 问题溯源&#xff1a;金属元素对接的技术瓶颈 在分子对接实践中&#xff0c;科研人…...