熬夜讲解vue3组合API中setup、 ref、reactive的用法
1.初识setUp的使用
简单介绍下面的代码功能:
使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上。
setUp函数是组合API的入口函数。这个是非常重要的。
setUp可以去监听变量的变化哈!我们将会利用它
ref 在vue中内置,需要导入。
<template>
<div>{{ countNum}}</div>
<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>
<div>
<ul>
<li v-for="item in satte.arr" :key="item.id">
{{item.name }}
</li>
</ul>
</div>
</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>
<div>
<ul>
<li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
{{item.name }}
</li>
</ul>
</div>
</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>
<div>
<ul>
<li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
{{item.name }}
</li>
</ul>
</div>
</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>
<div>
<div>
<input type="text" v-model="addobj.watchTv.name">
<button @click="addHander">添加</button>
</div>
<ul>
<li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
{{item.name }}
</li>
</ul>
</div>
</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 是删除的相关逻辑
add.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>
<div>
<div>
<input type="text" v-model="addobj.watchTv.name">
<button @click="addHander">添加</button>
</div>
<ul>
<li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
{{item.name }}
</li>
</ul>
</div>
</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的用法的更多相关文章
- Vue3 组合式 API 中获取 DOM 节点的问题
模板引用 Vue 提供了许多指令让我们可以直接操作组件的模板.但是在某些情况下,我们仍然需要访问底层 DOM 元素.在模板中添加一个特殊的属性ref就可以得到该元素. 访问模板引用 <scrip ...
- Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理
1 # 一.创建Vue3.0工程 2 # 1.使用vue-cli创建 3 # 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html# ...
- Vue3 Composition API写烦了,试试新语法糖吧—setup script
前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...
- Vue3中setup语法糖学习
目录 1,前言 2,基本语法 2,响应式 3,组件使用 3.1,动态组件 3.2,递归组件 4,自定义指令 5,props 5.1,TypeScript支持 6,emit 6.1,TypeScript ...
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
- Web API中常用Filter的执行顺序举例讲解
在WEB Api中,引入了面向切面编程(AOP)的思想,在某些特定的位置可以插入特定的Filter进行过程拦截处理.引入了这一机制可以更好地践行DRY(Don’t Repeat Yourself)思想 ...
- nodejs api 中文文档
文档首页 英文版文档 本作品采用知识共享署名-非商业性使用 3.0 未本地化版本许可协议进行许可. Node.js v0.10.18 手册 & 文档 索引 | 在单一页面中浏览 | JSON格 ...
- [Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处
前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词 ...
- Vue3全局APi解析-源码学习
本文章共5314字,预计阅读时间5-15分钟. 前言 不知不觉Vue-next的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官 ...
随机推荐
- 如何使用Vue中的slot
之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容.然后就没有理解插槽的概念.其实说白了,使用slot就是先圈一块地,将来可能种花种 ...
- springboot 配置将info、error、debug 分别输出到不同文件
在resource下创建名为 logback-spring.xml 的配置文件,内容如下: <?xml version="1.0" encoding="UTF-8& ...
- hdu4908 中位数子串
题意: 给你N个数字组成的数列,然后问你这里面有多少个是以M为中位数的子序列. 思路: 首先分四中简单的情况求 (1) 就是只有他自己的那种情况 那么sum+1 ...
- 18张图带你入门最新版JumpServer
环境要求 docker-ce Python3+ mysql5.6+ Redis 1 Ubuntu 安装 docker-ce 环境 参考文档 https://docs.docker.com/engine ...
- (Py练习)判断101-200之间的素数个数并输出
判断素数的方法之一:用一个数分别去除以2到squrt(这个数),如果能被整除,则不是素数. import math h = 0 leap = 1 for m in range(101, 201): k ...
- 容器随Docker启动而启动
在容器开启状态下 docker container update --restart=always 容器名
- RESTful中的PUT和PATCH实践
先放上后台的在线API文档:SkyBlog Swagger API 在UserApi中,有这样三个接口1. PUT /users/{id} 更新用户信息2. PATCH /users/role/{id ...
- python模块一之faker模块
faker模块主要是用来创建伪数据,无需手动生成或者手写随机数来生成数据,可以利用faker完成伪造大量测试数据的工作 一.安装 pip install faker 二.使用 from faker i ...
- 月薪6K和月薪2W的测试,有什么区别?
之前,我收到了一位朋友的好消息,说自己拿到了接近月薪 20k 的 offer. 说实话,软件测试岗位前期门槛低,但是想要拿到高薪真没那么简单.工作 2-3 年薪资还在原地打转的同学,都大有人在. ...
- Mybatis学习之自定义持久层框架(四) 自定义持久层框架:生产sqlSession
前言 上一回我们完成了数据库配置文件的读取和解析工作,有了这些准备工作,我们就可以与数据库创建连接和会话了,所谓sqlSession就是数据库的会话,一切增删查改操作都是在与数据库的会话中完成,下面我 ...