熬夜讲解vue3组合API中setup、 ref、reactive的用法以及hooks的使用

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 

 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 

 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){

 satte.arr.splice(index,1)

 return { satte, del}

 /script 

4将删除的逻辑分离出去 形成一个单独的模块

 template 

 div 

 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){

 satte.arr.splice(index,1)

 // 将数据satte 和方法 del 暴露出去

 return { satte,del }

 /script 

5. 实现添加功能 事件之间传递参数

 template 

 div 

 div 

 input type text v-model addobj.watchTv.name 

 button click addHander 添加 /button 

 /div 

 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){

 satte.arr.splice(index,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){

 satte.arr.splice(index,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 

 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（重点）和组合式Api的生命周期钩子函数 相信玩过vue3的同学们，大部分应该都了解或者使用过vue2吧，那么对选项式的api就不会陌生，或者你不熟悉名字，看一下下面的代码就非常清楚了。
vue3 中隐藏的实用API 在实际项目中，我们通常会封装一些工具类，如判断数组、对象、函数等…… 然而在 vue3 已经内置了很多常用的工具函数，因此我们不必再重复造轮子