Vue3笔记

setup

  1. Vue3.0中一个新的配置项,值为一个函数。
  2. 组件中所用到的:数据、方法等等,均要配置在setup中。
  3. setup函数的两种返回值:
    1. 若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。(重点关注!)
    2. 若返回一个渲染函数:则可以自定义渲染内容。(了解)
  4. 注意点:
    1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置(data、methos、computed…)中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置(data、methos、computed…)。
      • 如果有重名,setup优先。
    2. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise,模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)
<template><h1>个人信息</h1><h2>姓名:<input type="text" v-model="name"></h2><h2>年龄:<input type="text" v-model="age"></h2><button @click="changeInfo">更改信息</button>
</template><script>export default {name: 'App',components: {},// 这个例子不是响应式的setup() {let name = "zhenchengli"let age = 20function changeInfo() {// 这个例子中, 这样修改后页面上的数据不会响应变化name = "lzc"age = 18}// 需要将数据和方法返回return {name,age,changeInfo}}}
</script>

ref

作用:定义一个响应式的数据

语法: const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象。
  • JS中操作数据: xxx.value
  • 模板中读取数据: 不需要xxx.value,直接<div>{{xxx}}</div>

备注:

  • 接收的数据可以是:基本类型、也可以是对象类型。
  • 基本类型的数据:响应式依然是靠Object.defineProperty()getset完成的。
  • 对象类型的数据:内部使用的是Vue3.0中的一个新函数—— reactive函数。
<template><h1>个人信息</h1><h2>姓名:<input type="text" v-model="name"></h2><h2>年龄:<input type="text" v-model="age"></h2><h2>岗位:<input type="text" v-model="job.type"></h2><h2>薪水:<input type="text" v-model="job.salary"></h2><button @click="changeInfo">更改信息</button>
</template><script>import {ref} from 'vue';export default {name: 'App',components: {},setup() {// 使用ref会生成一个RefImpl实例对象, 数据才能响应式let name = ref("zhenchengli")let age = ref(20)let job = ref({type:"Java开发",salary:"1k"})function changeInfo() {console.log(name)console.log(age)console.log(job.value)// 修改RefImpl对象的值name.value = 'lzc'age.value  = 18job.value.type = '前端开发'job.value.salary = '2k'}return {name,age,job,changeInfo}}}
</script>

reactive

  • 作用:定义一个对象类型的响应式数据(基本类型不要用它,基本类型用ref函数)
  • 语法:const 代理对象 = reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象)
  • reactive定义的响应式数据是“深层次的”。
  • 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。
<template><h1>个人信息</h1><h2>姓名:<input type="text" v-model="person.name"></h2><h2>年龄:<input type="text" v-model="person.age"></h2><h2>岗位:<input type="text" v-model="person.job.type"></h2><h2>薪水:<input type="text" v-model="person.job.salary"></h2><h2>爱好:{{person.hobby}}</h2><button @click="changeInfo">更改信息</button><!--  <router-view/>-->
</template><script>import {reactive} from 'vue';export default {name: 'App',components: {},setup() {const person = reactive({name:"zhenchengli",age:20,job: {type:"Java开发",salary:"1k"},hobby:["跑步","打球"]})function changeInfo() {console.log(person)person.name = 'lzc'person.age  = 18person.job.type = '前端开发'person.job.salary = '2k'// 可以直接通过索引修改 vue2中不能这样修改person.hobby[0] = "唱歌"}// 将对象、方法返回return {person,changeInfo}}}
</script>

响应式原理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/73811.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QUIC协议科普导入(一)

一&#xff1a;QUIC协议导入 QUIC是一个通用的传输层网络协议&#xff0c;最初由Google的Jim Roskind设计&#xff0c;2012年实现并部署&#xff0c;2013年随着实验范围的扩大而公开发布&#xff0c;并向IETF描述。虽然长期处于互联网草案阶段&#xff0c;但在从Chrome浏览器到…

软件层面缓存基本概念与分类

缓存 缓存基本概念&#xff08;百度百科&#xff09; 缓存&#xff08;cache&#xff09;&#xff0c;原始意义是指访问速度比一般随机存取存储器&#xff08;RAM&#xff09;快的一种高速存储器&#xff0c;通常它不像系统主存那样使用DRAM技术&#xff0c;而使用昂贵但较快…

vue3中通过ref获取子组件实例,取值为undefined

也就是Vue3如何通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)&#xff0c;今天写index.vue(父组件&#xff09;时想获取子组件的数据和方法&#xff0c;通过给子组件绑定ref&#xff0c;打印子组件的数据为undefined&#xff1b;百度搜索常用方法为&#xff1a; …

【C++】继承基础知识一遍过

目录 一&#xff0c;概念 二&#xff0c;继承定义 1. 继承格式 2. 访问限定符与继承方式的关系 3. 继承父类成员访问方式的变化 小结&#xff1a; 三. 父类与子类对象赋值转化 四&#xff0c;继承作用域 1.特点 2. 测试题 五&#xff0c;派生类不一样的默认成员函…

基于深度学习的三维重建从入门实战教程 原理讲解 源码解析 实操教程课件下载

传统的重建方法是使用光度一致性等来计算稠密的三维信息。虽然这些方法在理想的Lambertian场景下,精度已经很高。 但传统的局限性,例如弱纹理,高反光和重复纹理等,使得重建困难或重建的结果不完整。 基于学习的方法可以引入比如镜面先验和反射先验等全局语义信息,使匹配…

Ribbon负载均衡+Nacos服务搭建

Ribbon负载均衡 流程 首先通过RibbonLoadBalanceerClient获取服务名&#xff0c;并传给DynamicServerListLoadBalancer——>通过EureKa-server获取服务名对应服务列表(也就是被注册到EureKa中的服务&#xff0c;可能包括不同端口的)&#xff0c;然后我们会根据IRule中的服务…

【python自动化】playwright长截图切换标签页JS注入实战

前言 当前教程使用的playwright版本为1.37.0,selenium版本为3.141.0 官方文档&#xff1a;https://playwright.dev/python/docs/screenshots 本教程目录如下 文章目录 前言playwright各类截图源码阅读ElementHandle类下的截图Page类下的截图Locator类下的截图 Playwright快速…

官方项目《内容示例》中Common UI部分笔记:Common UI 分场景使用教程

文章目录 前言0. 通用设置0.1 开启插件0.2 设置Viewport 1. 分场景教程1. 1 在仅使用鼠标控制的场景下Common Activatable StackCommon Activatable Widget 1.2 当焦点落到一个按钮时显示默认确认&#xff08;Click/Accept&#xff09;按键图标Common Input Action DataBaseInp…

【Mysql】数据库第二讲(数据库中数据类型的介绍)

数据类型 1.数据类型分类2.数值类型介绍2.1tinyint类型2.2bit类型介绍2.3小数类型介绍2.3.1 float2.3.2decimal 3.字符串类型介绍3.1char3.2varchar面试&#xff1a;char和varchar的区别 4.日期和时间类型5.enum和set 1.数据类型分类 2.数值类型介绍 2.1tinyint类型 数值越界测…

项目(智慧教室)第三部分,人机交互在stm32上的实现

一。使用软件 1.stm32cubemx中针对汉字提供的软件 2.对数据进行处理 2.上面点击ok--》这里选择确定 3.这里选择保存即可由字符库&#xff0c;但是需要占用内存太大&#xff0c;需35M&#xff0c;但是stm32只有几百k&#xff0c;所以需要自己删减。 生成中文字符&#xff08;用…

用Google CDC来同步Cloud SQL的数据到Bigquery

在Google的云平台中&#xff0c;我创建了一个Cloud SQL的Postgresql实例&#xff0c;在上面保存了一些业务数据。现在需要定期把这些数据同步到Bigquery数据仓库中&#xff0c;这样我们就能在Bigquery上进行数据的后续分析处理&#xff0c;生成数据报表。 Google提供了一个Dat…

QTday3(QT实现文件对话框保存操作、实现键盘触发事件【WASD控制小球的移动】)

1.实现文件对话框保存操作 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }void Widget::on_fontBtn_clicked() {//调用QFo…

More Effective C++学习笔记(6)

目录 条款32&#xff1a;在未来时态下发展程序条款33&#xff1a;将非尾端类设计为抽象类条款34&#xff1a;如何在同一个程序中结合C和C条款35&#xff1a;让自己习惯于标准的C语言 条款32&#xff1a;在未来时态下发展程序 “事情总是会改变”是一个事实&#xff0c;因此我们…

dll文件反编译源代码 C#反编译 dotpeek反编译dll文件后export

目录 背景下载安装dotpeek导入dll文件export导出文件参考 背景 项目合作的时候&#xff0c;使用前人的或者其他部门dll文件直接在机台运行&#xff0c;会出现很多问题&#xff0c;逻辑&#xff0c;效率等等&#xff0c;此时我们可以选择对他们的代码进行反编译和重构&#xff…

redisson分布式锁

RLock官网解释 基于Redis的Java分布式可重入锁对象&#xff0c;实现了锁接口。 如果获得锁的Redisson实例崩溃&#xff0c;那么这种锁可能永远挂起在获得状态。为了避免这种情况&#xff0c;Redisson维护了锁看门狗&#xff0c;它在锁持有者Redisson实例活着的时候延长锁过期时…

adb server version (19045) doesn‘t match this client (41); killing.的解决办法

我是因为安装了360手机助手&#xff0c;导致adb版本冲突。卸载之后问题解决 根据这个思路&#xff0c;如果产生"adb server version (19045) doesn’t match this client (41); killing."的错误&#xff0c;检查一下是否有多个版本的adb服务。

算法笔记:哈夫曼树、哈夫曼编码

1 字符的机内表示 2 前缀编码 字符只放在叶结点中字符编码可以有不同的长度由于字符只放在叶结点中&#xff0c;所以每个字符的编码都不可能是其他字符编码的前缀前缀编码可被惟一解码 3 哈夫曼树 哈夫曼树是一棵最小代价的二叉树&#xff0c;在这棵树上&#xff0c;所有的字…

SpotBugs(是FindBugs的继任者)安装、使用

SpotBugs介绍 SpotBugs和FindBugs的关系 SpotBugs是FindBugs的继任者&#xff0c;从SpotBugs停止的地方继续。 备注&#xff1a;FindBugs项目已经停止了&#xff0c;从2015年发布3.0.1版本以后再没有新的版本。 SpotBugs通过静态分析寻找java代码中的bug&#xff0c;通过发现…

网络渗透day10-工具和技术

以下为网络渗透的工具和技术。 让我更详细地描述网络渗透测试的各个阶段以及使用的工具。 1. 信息收集阶段&#xff1a; 目标识别&#xff1a; 在这一阶段&#xff0c;渗透测试人员确定测试的目标&#xff0c;例如特定的服务器、应用程序或网络。 开放源情报&#xff08;OSIN…

lv3 嵌入式开发-9 linux TFTP服务器搭建及使用

目录 1 TFTP服务器的介绍 2 TFTP文件传输的特点 3 TFTP服务器的适用场景 4 配置介绍 4.1 配置步骤 4.2 使用 5 常见错误 1 TFTP服务器的介绍 TFTP&#xff08;Trivial File Transfer Protocol&#xff09;即简单文件传输协议 是TCP/IP协议族中的一个用来在客户机与服务器…