网站基础上添加建设方案模板,学校网站建设工作目标,合肥网络推广公司,雄安网站建设制作#x1f609;博主#xff1a;初映CY的前说(前端领域) ,#x1f4d2;本文核心#xff1a;setup()概念、 reactive()的使用 【前言】vue3作为vue2的升级版#xff0c;有着很多的新特性#xff0c;其中就包括了组合式API#xff0c;也就是是 Composition API。学习组合… 博主初映CY的前说(前端领域) ,本文核心setup()概念、 reactive()的使用 【前言】vue3作为vue2的升级版有着很多的新特性其中就包括了组合式API也就是是 Composition API。学习组合式API有什么优点呢之前的vue2中结构不是挺不错的吗那么接下来的事件我将带着你从浅到深分析为什么我们需要学习组合式API以及我们的setup()函数作为入口函数的一个基本的使用方式。 目录⭐一、组合式API对比vue2项目结构在vue2当中在vue3当中⭐二、setup()函数的使用2.1setup()函数的基础概念2.2.setup()初体验2.3.reactive()函数2.3.1reactive()的进一步抽离2.3.2reactive()再进行进一步文件拆分并且引入⭐一、组合式API对比vue2项目结构
在vue2当中 1.优点易于学习和使用写代码的位置已经约定好。 2.缺点对于大型项目不利于代码的复用、不利于管理和维护。 3.解释同一功能的数据和业务逻辑分散在同一个文件的 N 个地方随着业务复杂度的上升我们需要经常在类似于data()以及methods中进行来回的处理
在vue3当中 1.优点可以把同一功能的数据和业务逻辑组织到一起方便复用和维护。 2.缺点需要有良好的代码组织和拆分能力相对没有 Vue2 容易上手。 3.解释注意为了能让大家较好的过渡到 Vue3.0 版本目前也是支持 Vue2.x 选项 API 的写法。
⭐二、setup()函数的使用
2.1setup()函数的基础概念
Vue3 中的 setup() 是 Vue3 新增的组件配置项用于替代 Vue2 中的 data()、methods()、computed() 等配置项。setup() 提供了更简洁的编写方式且能够更好地利用 Vue3 提供的 Composition API。setup() 函数接受两个参数分别是 props 和 context。其中props 是组件接收的属性值context 包含了一些组件的配置信息。 1.是什么setup 是 Vue3 中新增的组件配置项作为组合 API 的入口函数。 2.执行时机实例创建前调用甚至早于 Vue2 中的 beforeCreate。 3.注意点由于执行 setup 的时候实例还没有 created所以在 setup 中是不能直接使用 data 和 methods 中的数据的所以 Vue3 setup 中的 this 也被绑定为了 undefined。
虽然 Vue2 中的 data 和 methods 配置项虽然在 Vue3 中也能使用但不建议了建议数据和方法都写在 setup 函数中并通过 return 进行返回可在模版中直接使用一般情况下 setup 不能为异步函数。
2.2.setup()初体验
App.vue
templateh1 clicksay(){{ msg }}/h1
/template
scriptexport default {setup() {const msg Hello Vue3const say () {console.log(msg)}return { msg, say }},}
/script效果查看 注意酷似于vue2中的data()与methods都是需要写在return才可作为结果进行调用。 【小小面试题补充】setup 中 return 的一定只能是一个对象吗setup 也可以返回一个渲染函数 App.vue
scriptimport { h } from vueexport default {name: App,setup() {return () h(h2, Hello Vue3)},}
/script控制台则是打印出了h2标签的Hello Vue3。
2.3.reactive()函数
使用 reactive 函数包装数组为响应式数据。reactive 是一个函数用来将普通对象/数组包装成响应式式数据使用无法直接处理基本数据类型因为它是基于 Proxy 的而 Proxy 只能代理的是对象。 比如当我有一个需求点击删除当前行信息 App.vue templateulli v-for(item, index) in arr :keyitem clickremoveItem(index){{ item }}/li/ul
/templatescriptexport default {name: App,setup() {const arr [a, b, c]const removeItem (index) {arr.splice(index, 1)}return {arr,removeItem,}},}
/script通过vueTools查看我点击过后数据是被删除了但页面上并没有事实的渲染出来 此时使用 reactive()包装数组使变成响应式数据,别忘了导入
templateulli v-for(item, index) in arr :keyitem clickremoveItem(index){{ item }}/li/ul
/templatescriptimport { reactive } from vueexport default {name: App,setup() {const arr reactive([a, b, c])const removeItem (index) {arr.splice(index, 1)}return {arr,removeItem,}},}
/script此刻页面也就具有了响应式点击时删除页面则是响应式的 同理我们用reactive()来包裹我们的对象来使用
templateform submit.preventhandleSubmitinput typetext v-modeluser.id /input typetext v-modeluser.name /input typesubmit //formulli v-for(item, index) in state.arr :keyitem.id clickremoveItem(index){{ item.name }}/li/ul
/templatescriptimport { reactive } from vueexport default {name: App,setup() {const state reactive({arr: [{id: 0,name: ifer,},{id: 1,name: elser,},{id: 2,name: xxx,},],})const removeItem (index) {// 默认是递归监听的对象里面任何一个数据的变化都是响应式的state.arr.splice(index, 1)}const user reactive({id: ,name: ,})const handleSubmit () {state.arr.push({id: user.id,name: user.name,})user.id user.name }return {state,removeItem,user,handleSubmit,}},}
/script上述代码的解意 我定义了输入框定义了删除、添加事件的操作通过v-model打到双向绑定数据来完成对我的数据进行增加与删除。 到目前你是不是对setup()的使用有了更加清晰的认识呢下面再来简化一下我们的写法。
2.3.1reactive()的进一步抽离
优化将同一功能的数据和业务逻辑抽离为一个函数代码更易读更容易复用。
templateform submit.preventhandleSubmitinput typetext v-modeluser.id /input typetext v-modeluser.name /input typesubmit //formulli v-for(item, index) in state.arr :keyitem.id clickremoveItem(index){{ item.name }}/li/ul
/templatescriptimport { reactive } from vuefunction useRemoveItem() {const state reactive({arr: [{id: 0,name: ifer,},{id: 1,name: elser,},{id: 2,name: xxx,},],})const removeItem (index) {state.arr.splice(index, 1)}return { state, removeItem }}function useAddItem(state) {const user reactive({id: ,name: ,})const handleSubmit () {state.arr.push({id: user.id,name: user.name,})user.id user.name }return {user,handleSubmit,}}export default {name: App,setup() {const { state, removeItem } useRemoveItem()const { user, handleSubmit } useAddItem(state)return {state,removeItem,user,handleSubmit,}},}
/script将方法抽离出来用类似于导入的方式进行一个抽离将数据与方法放在一起便于我们的统一管理。
2.3.2reactive()再进行进一步文件拆分并且引入 App.vue
templateform input typetext v-modeluser.id /input typetext v-modeluser.name /button typesubmit click.preventsubmit提交/button/formulli v-for(item, index) in state.arr :keyitem.id clickremoveItem(index){{ item.name }}/li/ul
/templatescript
import {useRemoveItem,handleSubmit} from ./hooksexport default {name: App,setup() {const { state, removeItem } useRemoveItem()const { user, submit } handleSubmit(state)return {state,removeItem,user,submit}},}
/scripthooks/index.js
import { reactive } from vue
export const useRemoveItem() {const state reactive( {arr: [{id: 0,name: ifer,},{id: 1,name: elser,},{id: 2,name: xxx,},]})const removeItem(index){state.arr.splice(index,1)console.log(state.arr);}return { state, removeItem }
}
export const handleSubmit(state){const user reactive({id: ,name: ,})console.log(1);const submit () {state.arr.push({...user})user.id user.name }return { user, submit }
}至此本文结束愿你有所收获 期待大家的关注与支持! 你的肯定是我更新的最大动力
