vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
类别:编程学习 浏览量:1230
时间:2022-01-14 02:47:38 vue3 props用法
vue3组合API中setup、 ref、reactive的使用大全1.初识setUp的使用
简单介绍下面的代码功能:
使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上。
setUp函数是组合API的入口函数。这个是非常重要的。
setUp可以去监听变量的变化哈!我们将会利用它
ref 在vue中内置,需要导入。
<template> <li>{{ countNum}}</li> <button @click="handerFunc">按钮</button> </template> <script> import {ref} from 'vue' export default { name: 'App', setup() { // 这一句表示的是定义了一个变量count。这个变量的初始值是100 let countNum=ref(100); // 在组合API中,如果想定义一个方法,不用定义到methods中去。直接定义就可以了 function handerFunc(){ // console.log(countNum);//countNum是一个对象 countNum.value += 10; } //在组合api中定义的方法,或者变量。如果外界需要使用,那么必须通过 return {aaa,func} 的方式暴露出去 return { countNum ,handerFunc} } } </script>
2认识reactive的使用
ref函数只能够去监听简单类型的数据变化。
不能够去监听,复杂类型的变化(数组、对象)。
所以我们的主角reactive就出现了。
setup 中的函数会自动执行一次。
<template> <li> <ul> <li v-for="item in satte.arr" :key="item.id"> {{item.name }} </li> </ul> </li> </template> <script> import {reactive} from 'vue' export default { name: 'App', setup(){ console.log("setUp会自动执行的") // ref函数的注意点: // ref函数只能够去监听简单类型的数据变化,不能够去监听,复杂类型的变化(数组、对象) // reactive 方法里面是一个对象 let satte=reactive({ arr:[ {name:"司藤",id:'0011'}, {name:"皮囊之下",id:'0011'}, {name:"百岁之约",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) return { satte } }, } </script>
3使用reactive
实现视图的删除
<template> <li> <ul> <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)"> {{item.name }} </li> </ul> </li> </template> <script> import {reactive} from 'vue' export default { name: 'App', setup(){ let satte=reactive({ arr:[ {name:"司藤",id:'0011'}, {name:"皮囊之下",id:'0011'}, {name:"百岁之约",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) // 删除被点击的元素 function del(index){ for(let i=0;i<satte.arr.length;i++){ if(index==i){ satte.arr.splice(i,1) } } } return { satte, del} }, } </script>
4将删除的逻辑分离出去
形成一个单独的模块
<template> <li> <ul> <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)"> {{item.name }} </li> </ul> </li> </template> <script> import {reactive} from 'vue' export default { name: 'App', setup(){ // onlyDelLuoJi() 方法中含有一个数组 和一个方法;类似于解构 let {satte,del }=onlyDelLuoJi(); // 暴露给外界使用 return { satte,del} }, } function onlyDelLuoJi(){ let satte=reactive({ arr:[ {name:"司藤",id:'0011'}, {name:"皮囊之下",id:'0011'}, {name:"百岁之约",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) // 删除被点击的元素 function del(index){ for(let i=0;i<satte.arr.length;i++){ if(index==i){ satte.arr.splice(i,1) } } } // 将数据satte 和方法 del 暴露出去 return { satte,del } } </script>
5. 实现添加功能
事件之间传递参数
<template> <li> <li> <input type="text" v-model="addobj.watchTv.name"> <button @click="addHander">添加</button> </li> <ul> <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)"> {{item.name }} </li> </ul> </li> </template> <script> import {reactive} from 'vue' export default { name: 'App', setup(){ // onlyDelLuoJi() 方法中含有一个数组 和一个方法;类似于解构 let {satte,del }=onlyDelLuoJi(); // 传递参数satte 是onlyDelLuoJi函数中提供的satte。进行传递 let { addobj,addHander }=OnlyaddHander(satte); // 暴露给外界使用 return { satte,del,addobj, addHander} }, } //添加功能模块 function OnlyaddHander(satte){ console.log('初始化添加',satte) let addobj=reactive({ watchTv:{ name:"", id:"" } }); function addHander(){ // 重置清空 错吴做法 // satte.arr.push(addobj.watchTv) // addobj.watchTv.name = ""; // addobj.watchTv.id = ""; // 正确做法 let oldobj = Object.assign({}, addobj.watchTv) satte.arr.push(oldobj) } return { addobj,addHander } } //删除功能模块 function onlyDelLuoJi(){ console.log('删除初始化') let satte=reactive({ arr:[ {name:"司藤",id:'0011'}, {name:"皮囊之下",id:'0011'}, {name:"百岁之约",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) // 删除被点击的元素 function del(index){ for(let i=0;i<satte.arr.length;i++){ if(index==i){ satte.arr.splice(i,1) } } } // 将数据satte 和方法 del 暴露出去 return { satte,del } } </script>
6 将他们抽离成单独的文件
我们想在想将添加删除相关的逻辑,单独抽离成一个文件。
add.js 是添加相关的逻辑
del.js 是删除的相关逻辑
import { reactive } from "vue" function OnlyaddHander(satte){ console.log('初始化添加',satte) let addobj=reactive({ watchTv:{ name:"", id:"" } }); function addHander(e){ // 重置清空 错吴做法 // satte.arr.push(addobj.watchTv) // addobj.watchTv.name = ""; // addobj.watchTv.id = ""; // 正确做法 let oldobj = Object.assign({}, addobj.watchTv) satte.arr.push(oldobj) e.preventDefault(); } return { addobj,addHander } } export default OnlyaddHander
adel.js
import {reactive } from "vue" function onlyDelLuoJi() { console.log('删除初始化') let satte=reactive({ arr:[ {name:"司藤",id:'0011'}, {name:"皮囊之下",id:'0011'}, {name:"百岁之约",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) // 删除被点击的元素 function del(index){ for(let i=0;i<satte.arr.length;i++){ if(index==i){ satte.arr.splice(i,1) } } } // 将数据satte 和方法 del 暴露出去 return { satte,del } } export default onlyDelLuoJi
主文件
<template> <li> <li> <input type="text" v-model="addobj.watchTv.name"> <button @click="addHander">添加</button> </li> <ul> <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)"> {{item.name }} </li> </ul> </li> </template> <script> import onlyDelLuoJi from "./components/del" import OnlyaddHander from "./components/add" export default { name: 'App', setup(){ // onlyDelLuoJi() 方法中含有一个数组 和一个方法;类似于解构 let {satte,del }=onlyDelLuoJi(); // 传递参数 let { addobj,addHander }=OnlyaddHander(satte); // 暴露给外界使用 return { satte,del,addobj, addHander} }, } </script>
以上就是vue3组合API中setup、 ref、reactive的用法的详细内容,更多关于vue组合API的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue集成文件上传插件(vue 实现上传组件)
- vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue监控对象变化(Vue之监听方法案例详解)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
- vue购物车简单项目(vue实现简单购物车案例)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue各组件如何引用(Vue局部组件数据共享Vue.observable的使用)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- 银泰集团董事长沈国军获评 北京影响力 十大企业家(银泰集团董事长沈国军获评)
- 15帅气男士发型,清爽时尚很有型,喜欢就试试(清爽时尚很有型)
- 哪几个历史人物被影协主席李雪健演的活灵活现(哪几个历史人物被影协主席李雪健演的活灵活现)
- 王伦狭隘,晁盖霸道,宋江奸诈骨头软,只有鲁智深才适合当寨主(王伦狭隘晁盖霸道)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
- 梁山创始人杜迁,为何不受宋江待见,只排名83位(梁山创始人杜迁)
热门推荐
- tomcat服务页面打开超慢(Web服务器Tomcat高级优化)
- mysqlsource命令作用(MySQL source命令的使用简介)
- php可以一次下载几个文件(php实现大文件断点续传下载实例代码)
- thinkphp5怎么设置当前的模块(thinkPHP5.1框架中Request类四种调用方式示例)
- 阿里云域名解析地址写什么(阿里云 Linux 服务器内部无法解析域名问题解决方法)
- 云服务器有什么工作用(云服务器有什么用?怎么选择?)
- javascript如何实现异步任务(JavaScript 中如何实现并发控制)
- dedecms栏目功能(织梦DEDECMS网站建设栏目自动添加nofollow的方法介绍)
- mysql的基本索引类型(MySQL 隔离数据列和前缀索引的使用总结)
- dedecms栏目页更改(dedecms系统列表页调用tag标签同时带上链接)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9