前面几篇我们介绍了 compostion API 的一些基础用法, 如 setup, ref, reactive, toRefs, toRef, context 等. 本篇呢找了一个经典的 TodoList 小案例来进行强化和巩固最基础的 composition API 的基本使用.
最直观的就是将数据和处理逻辑都写在 setup 函数中, 最后直接 return 出来给模板调用.
<!DOCTYPE html>
<html lang="en">
<head>
<title>TodoList</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
setup () {
const { ref, reactive } = Vue
const inputValue = ref('')
const list = reactive([])
const dealInputChange = (e) => {
// 同输入数据做双向绑定
inputValue.value = e.target.value
}
const dealSubmit = () => {
list.push(inputValue.value)
inputValue.value = ''
}
return {
inputValue,
list,
dealInputChange,
dealSubmit
}
},
template: `
<div>
<div>
<input :value="inputValue" @input="dealInputChange" />
<button @click="dealSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
</div>
`,
})
const vm = app.mount('#root')
</script>
</body>
</html>
但这样写就很不直观, setup 函数将会变得更加臃肿, 但其实咱们是想将 setup 定位为一个流程调度的作用, 因此可以将数据或者逻辑给再次封装到外面去哦.
从这个例子来看, setup 就做了两件事:
- 关于 list 数据的处理
- 关于 inputValue 的处理
因此就很清晰啦, 直接在外面再封装为两个函数即可哦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>TodoList</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// 1. 关于 list 的操作进行封装
const aboutListEffect = () => {
const { reactive } = Vue
const list = reactive([])
const addItem = item => {
list.push(item)
}
console.log(list)
return { list, addItem }
}
// 2. 关于 inputValue 的操作进行封装
const aboutInputValueEffect = () => {
const { ref } = Vue
const inputValue = ref('')
const dealInputChange = (e) => {
// 同输入数据做双向绑定
inputValue.value = e.target.value
}
return { inputValue, dealInputChange }
}
const app = Vue.createApp({
setup () {
// setup 就做了一个流程调度和中转的操作
const { list, addItem } = aboutListEffect()
const { inputValue, dealInputChange } = aboutInputValueEffect()
return {
inputValue,
list,
dealInputChange,
addItem
}
},
template: `
<div>
<div>
<input :value="inputValue" @input="dealInputChange" />
<button @click="() => addItem(inputValue)">提交</button>
</div>
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
</div>
`,
})
const vm = app.mount('#root')
</script>
</body>
</html>
则这样就是实现了模块解耦分离, 用 setup 函数进行调度, 逻辑数据处理则封装到外面去, 这种编程的感觉就和写口段接口是一样的, 就非常清晰易懂啦.
标签：const,ToDoList,setup,list,value,API,inputValue,vue3,dealInputChange From： https://www.cnblogs.com/chenjieyouge/p/16838601.html