vue3开发实践笔记

一、setup

生命周期

1、执行时机:会在beforeCreate之前执行,内部无法访问this

2、setup 包含的生命周期
onBeforeMount——挂载开始前调用
onMount——挂载后调用
onBeforeUpdate——当响应数据改变,且重新渲染前调用
onUpdated——重新渲染后调用
onBeforeUnmount——Vue实例销毁前调用
onUnmounted——实例销毁后调用
onActivated——当keep-alive组件被激活时调用
onDeactivated——当keep-alive组件取消激活时调用
onErrorCaptured——从子组件中捕获错误时调用

export default { name: "hello", setup(msg) { console.log(msg); return { name:"Mr liu" }; }, };
}

二、数据绑定 / 响应式数据

在vue3中setup默认返回的普通数据不是响应的,如果希望数据是响应式的,有4种方式

1、ref

ref 一般用于简单类型数据。ref主要是用于定义基本数据类型的数据并保证响应式能力,也可以用于对象或数据

使用ref()函数时,通常要注意两点:
1)在setup中修改值和获取值的时候,需要.value
2)在模板中使用ref申明的响应式数据,可以省略.value,模板使用{{变量}}取值

<template><div>{{ ebooks }}</div>
</template><script>
import { ref } from 'vue';
export default {name: 'App',setup(){const ebooks = ref();ebooks.value = 1;return{ebooks}}
}
</script>

2、reactive

reactive是一个函数,可以用于定义一个复杂数据类型

// 定义数组 let list:any = reactive([])
import { reactive, toRef } from 'vue';
setup(){const ebooks1=reactive({books:[]})ebooks1.books= data.list;return{ebooks1: ebooks,ebooks2:toRef(ebooks1,"books")}
}

3、toRef

当我们在模板中渲染数据时,不希望由前缀的时候可以使用组合-toRef()
toRef()是函数,转换响应式对象中某个属性为单独响应式数据,并且值是关联的

<template><div>{{ ebooks }}{{ ebooks2 }} // books列表</div>
</template><script>
import { reactive, toRef } from 'vue';
export default {name: 'App',setup(){const ebooks1=reactive({books:[]})ebooks1.books= data.list;return{ebooks1: ebooks,ebooks2: toRef(ebooks1,"books")}}
}

4、toRefs

toRefs函数可以定义转换响应式中所有属性为 响应式数据,通常用于结构reactive定义的对象,转换响应式对象中所有属性(也可以是一部分)为单独响应式数据,对象成为普通对象,并且值是关联的

<template><div>{{ msg }}</div><div>{{ info }}</div>
</template><script>
import { reactive, toRefs } from 'vue'
export default {name: 'App',setup() {const obj = reactive({msg: 'hello',info: 'hi'})const { msg, info } = toRefs(obj)const hClick = () => {msg.value = 'nihao'info.vaule = 'hihi'}return { msg, info, hClick }}
}
</script>

对比:

  • ref 和 reactive定义普通类型响应式数据,显然使用reactive比较麻烦,
  • ref比较麻烦的是,使用变量的话,不管是获取还是使用的话都需要加上.value;

注意:

  • 项目实际开发中必须统一,不能既使用reactive又使用ref

三、vue3 路由跳转

1、useRouter
import { useRouter } from ‘vue-router’
setup(){
const router = useRouter()
router.push(’/corporateTransfer’)
}

2、传参:
// 字符串
router.push(‘home’)
// 对象
router.push({ path: ‘home’ })
// 命名的路由
router.push({ name: ‘user’, params: { userId: ‘123’ }})
// 带查询参数,变成 /register?userId=123

const userId = ‘123’
router.push({ name: ‘user’, params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
// 这里的 params 不生效
router.push({ path: ‘/user’, params: { userId }}) // -> /user
————————————————
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

注意:

  • 如果提供了 path,params 会被忽略,但query 没有这种情况,此时需要提供路由的 name 或手写完整的带有参数的 path
  • 上述规则同样适用于 router-link 组件的 to 属性
  • 如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化

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

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

相关文章

GetLastError()函数返回值及含义

GetLastError返回的值通过在api函数中调用SetLastError或SetLastErrorEx设置。函数并无必要设置上一次错误信息&#xff0c;所以即使一次GetLastError调用返回的是零值&#xff0c;也不能担保函数已成功执行。只有在函数调用返回一个错误结果时&#xff0c;这个函数指出的错误结…

LINQ系列:Linq to Object排序操作符

LINQ排序操作符包括&#xff1a;OrderBy、OrderByDescending、ThenBy、ThenByDescending及Reverse。 1. OrderBy 1>. 原型定义 public static IOrderedQueryable<TSource> OrderBy<TSource, TKey>(this IQueryable<TSource> source, Expression<Func&l…

第5章 为手机而设计

5&#xff0e;为手机而设计 至此,你已经了解了手机&#xff0c;通过一个简单的应用程序的演练了工作方式并且学习XAML的基础知识。现在你应该开始考虑你要编写的应用程序的性质。虽然很容易想到的是手机只是Silverlight存在于另一个屏幕上而已&#xff0c;但是事实没有这么简单…

vue3.x全局toast、message、loading组件

vue3.x全局toast、message、loading组件Toast组件loadingToast组件 在 src/components下创建toast文件夹&#xff0c;并依此创建index.vue和index.js 1、index.vue 一般toast会有如下功能&#xff1a;背景色、字体颜色、文本、停留时间 <template> <div class"…

知天命

吾乃浑浑噩噩、后知后觉之人。 今欲窥天命之道。天命&#xff0c;何也&#xff1f; 天之命乎&#xff0c;或人之道乎&#xff1f; 人生于此世。 盲从于世上&#xff0c;依其欲而行&#xff0c;乃天之命也。 人可存之世上仅百载&#xff0c;终白土亦。 随意欲而为&#xff0c;应…

教程:在 VM Depot 中查找 Azure 可用的虚拟机镜像

&#xfeff;&#xfeff;发布于 2014-07-08 作者 陈 忠岳 对于 Azure 的社区管理虚拟机资源库——VM Depot——的用户来说&#xff0c;网站的搜索功能已得到极大的改善。这一搜索能力的增强&#xff0c;可以帮助用户更容易地找到 Azure 可用的开源 Linux 虚拟机。 搜索发现 …

HDU 1203 I NEED A OFFER!(01背包)

I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 9932 Accepted Submission(s): 3687 Problem DescriptionSpeakless很早就想出国&#xff0c;现在他已经考完了所有需要的考试&#xff0c;准备了…

H5实现微信摇一摇功能

//摇一摇<script type"text/javascript"> var num 1; var SHAKE_THRESHOLD 2000; var last_update 0; var x y z last_x last_y last_z 0; function init() { if (window.DeviceMotionEvent) { window.addEventListener(devicemotion, deviceMotionHan…

PHP起点 - 运算符

一.算术运算符 名称    操作符    举例 加法          $a $b 减法     -      $a - $b 乘法     *     $a * $b 除法运算   /      $a / $b 取余运算   %     $a % $b 递增运算        $a, $a 递减运算  …

Java I/O流

字符流&#xff1a; Reader&#xff1a;用于读取字符流的抽象类。子类必须实现的方法只有 read(char[], int, int) 和 close()。 |---BufferedReader&#xff1a;从字符输入流中读取文本&#xff0c;缓冲各个字符&#xff0c;从而实现字符、数组和行的高效读取。 可以指定缓冲区…

java中跨时区的日期格式转换

2019独角兽企业重金招聘Python工程师标准>>> 先上一段代码 public class DataTransfer {public static void main(String[] args) {String dateStr "Sep 30, 2014 12:00:00 AM";SimpleDateFormat sdf new SimpleDateFormat();sdf.applyPattern("MM…

Asp.net WebForm中应用Jquery EasyUI Layout

Asp.net WebForm中应用Jquery EasyUI Layout 按照EasyUI文档中的示例&#xff0c;编写layout代码&#xff1a; <body class”easyui-layout”> <div region"north" border"false" style"height:60px;background:#B3DFDA;">north reg…

C语言读取写入CSV文件 [二]进阶篇——写入CSV文件

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 本系列文章目录 [一] 基础篇 [二] 进阶篇——写入CSV [三] 进阶篇——读取CSV 什么是 包裹&#xff08;使用双引号&…

ABAP 数值四舍五入函数

DATA : dat TYPE p DECIMALS 9 VALUE 12.5445 ,dat1 TYPE p DECIMALS 9 .DATA dat2 TYPE p DECIMALS 9 VALUE 12.540.* 方法一 CALL FUNCTION HR_NZ_ROUNDING_DECIMALSEXPORTINGvalue_in datconv_dec 2 " 设置保留几位小数IMPO…

K8S中部署apisix(非ingress)

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 不使用pvc的方式在K8S中部署apisix-gateway 简介 因为公司项目准备重构&#xff0c;现在做技术储备&#xff0c;之前公司项…

MVC3 URL 数据绑定

从数据库中取出的Int类型的ID&#xff0c;在Razor视图中显示的链接地址格式为:http://localhost:1846/news/Detail/1 Router格式&#xff1a;{controller/action/id} 数据库中对应的字段为ID,对应的Action中的参数名也必须为ID 否则 编译器会报参数值为Null的错误。 当数据库中…

机器学习理论知识部分--偏差方差平衡(bias-variance tradeoff)

摘要&#xff1a; 1.常见问题 1.1 什么是偏差与方差&#xff1f; 1.2 为什么会产生过拟合&#xff0c;有哪些方法可以预防或克服过拟合&#xff1f; 2.模型选择例子 3.特征选择例子 4.特征工程与数据预处理例子 内容&#xff1a; 1.常见问题 1.1 什么是偏差与方差&#xff1f; …

MVC中获取模型属性的Range和StringLength验证特性设置

MVC中的客户端及服务端模型验证信息都以ModelMetadata类型作为承载&#xff0c;在获得属性的ModelMetadata之后&#xff08;还不知道怎么获取ModelMetadata的童鞋请自行恶补&#xff09;&#xff0c;我们可以轻松得到一些我们在模型中定义的特性&#xff0c;比如显示名称、是否…

有手就行3——持续集成环境—maven、tomcat、安装和配置

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 有手就行3——持续集成环境—maven、tomcat、安装 持续集成环境**(5)-Maven****安装和配置** 持续集成环境(6)-Tomcat安装…

隐藏Content-Location标头带的内部IP地址的执行语句以及其可能会带来的问题

用IIS发布的系统&#xff0c;利用各种检测工具&#xff0c;可以获取到页面的请求头的信息&#xff0c;里面会带有服务器IP等保密信息。 为了避免服务器IP地址等这种信息别的工具检测到&#xff0c;导致安全隐患。可以在CMD中执行以下语句&#xff1a; cscript c:\\inetpub\admi…