VUE3(八)setup与ref函数
Setup是VUE3.0中为我们新提供的的组件选项。
创建组件实例,然后初始化props,紧接着就调用setup函数,从生命周期钩子的视角来看,他在beforecreate之前调用。
setup()是函数,具有return,return函数中定义的变量,把其暴露给模板。
一:setup
1:Setup可以替代VUE2中的data和method函数。
(1):使用VITE创建一个空项目,默认会给我们一个helloworld组件,我们使用这个组件做测试。
项目搭建,请移步《VUE3(一)安装+使用vite创建一个项目》
上代码,这里大概展示一下VUE3的新写法
Helloworld.vue
<template><h1>{{ msg }}</h1><button @click="count++">count is: {{ count }}</button><p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p><button @click="clickMe()">点我弹窗</button>
</template><script lang='ts'>
import {ref,
} from "vue";
export default {name: 'HelloWorld',props: {msg: String},// 使用setup 代替 data// 因为我这里使用的是typescript,因此需要给参数指定类型setup(props:any,context:any){let count = ref(0); const clickMe = () => {// 使用ref关键字绑定的变量,赋值 的时候必须使用.valuecount.value++;alert('hi');}return {count,clickMe}},//*/// 这是VUE2.0的写法,data与methods/*data() {return {count: 0}},methods:{clickMe(){alert('hi');}}//*/
}
</script>
2:setup的两个参数(prpos,context)
关于setup的参数,官方文档有详尽的介绍,具体,请参照:
https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#参数
(1):prpos
setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。
这个就是父组件传入子组件的参数。具体,请参照上方的代码。
看到这里,其实你可以停下来,自己搭建一个项目试一下。
(2):context
这个参数名称不是固定的,叫什么都行。
传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象,它暴露三个组件的 property:
export default {setup(props, context) {// Attribute (非响应式对象)console.log(context.attrs)// 插槽 (非响应式对象)console.log(context.slots)// 触发事件 (方法)console.log(context.emit)}
}
这里我只用到了emit(触发事件),这个可以用作将子组件的值传递给父组件。具体我们之后组件那部分再说。
3:setup中没有办法访问到this。
this在setup中不可用,方法和声明周期都可以写在setup中,如果在方法中访问setup中的变量时,直接变量名就可以使用。方法名和变量名要在setup中return出去才可以正常执行。
4:setup()是函数,具有return,return函数中定义的变量,把其暴露给模板。
具体,请参见第一部分的示例代码
二:ref关键字
在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI
一定要注意,ref创建的是一个响应式数据。这个在VUE3.0中非常灵活,几乎是怎么玩都行的。具体后边还会说到,这里大概说一下基本用法。
1:引入ref
import {ref,
} from "vue";
2:使用注意点
在 VUE 的模板中使用 ref 的值不需要通过 value 获取 (Vue 会通过自动给 ref 的值加上 .value)
在 js 中使用 ref 的值必须使用 .value 获取
上方代码实现效果:
有好的建议,请在下方输入你的评论。
欢迎访问个人博客
https://guanchao.site
欢迎访问小程序:
VUE3(八)setup与ref函数相关推荐
- 前端之vue3的setup和setup的2个的形参、响应式页面
setup setup setup总结 ref()函数 -- 实现响应式 ref()小结 reactive函数处理对象(包括数组) reactive小结 vue2/3响应式原理 vue2存在问题, 提 ...
- VUE3(setup响应式函数系统API)
Vue3.0提供的一组具有响应式特性的杉树式API,以函数的形式提供 1.reactive reactive()函数接收一个普通对象,返回该普通对象的响应式代理对象 2.ref ref()函数接收一个 ...
- vue3中setup()函数的使用二
vue3的使用 <template><div id="one"><img src="http://127.0.0.1:9000/upload ...
- vue3 ref函数用法
1.在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI <template><div><h1>{{mycount ...
- vue3学习笔记(ref, reactive, setup, hook...)
目录 一.搭建项目 二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
- vue3.0 ref 函数
先写一个基础的vue3模板 <template><div><p>个人信息</p><p>姓名:{{ name }}</p>< ...
- vue3中setup()函数的使用一
<template><div id="one"><img src="http://127.0.0.1:9000/upload/001.png ...
- Vue3学习之第二节:ref函数、reactive函数
一.ref 函数 作用:定义一个响应式的数据. 示例: <template><div>{{ name }}</div> </template><s ...
- Vue3.x 父组件Setup、Ref操纵子组件中的元素方法
目录 父组件 方法一: defineComponent 方法二: setup语法糖 小伙伴们在开箱Vue3的过程中一点会踩到不少坑. 比如很多小伙伴想要通过ref来操纵DOM,可偏偏翻车. 这里分享两 ...
最新文章
- 2021-2027全球与中国跨临界二氧化碳系统市场现状及未来发展趋势报告
- java 获取动态的service_【Android】动态代理在 Retrofit 中的使用
- python默认参数惹得祸
- pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y
- 商业逻辑12讲之人力资源的逻辑
- 备战美赛,这些你应该知道的知识点
- 最近和前字节跳动大佬聊了聊今年春招面试的变化
- 吴恩达深度学习1.2练习_Neural Networks and Deep Learning
- blufr 算法的理解---理解的不对的,欢迎拍砖
- 初识liux简单命令
- R语言绘图底层系统之Grid包
- JDK全部版本高速下载,JDK1.8高速下载,JDK1.9、JDK10、JDK11、JDK12、JDK13、JDK14、JDK15下载
- 实现一个在线抽奖系统,就算是个小白看了也能做出来(附源码)
- python 通达信公式函数,python使用通达信公式,请人用python编写如下公式,我对编程一窍不通...
- 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
- 2020年最全的自动化测试面试题及答案--看完后吊打面试官!自动化测试是什么?自动化测试学什么?
- IE打开网页时变成下载文件的解决办法
- 解析 | 模-数(A/D)转换器
- 第三方账号登陆-sina微博_PC篇
- 收集的css动画效果
热门文章
- 苹果备忘录怎么调字体大小_苹果备忘录怎么恢复?不小心删除的备忘录有救了!...
- 额温枪用途和注意事项
- Python 量化交易系列教程
- 动漫培训学校排行榜(最新)
- 搭建网站 服务器 书,从零搭建自己的本地网站服务器(3)前端的江湖
- oracle数据库ORA-00918: 未明确定义列
- java替换空格_字符串替换空格
- 华为p50 pro 鸿蒙,华为P50 Pro将于6月发布,鸿蒙系统加持,这才是华为真正实力!...
- u盘做linux教程视频教程,教程:编写自己的U盘linux操作系统
- 一探前端开发中的JS调试技巧