3.0正式发版了，先尝鲜一波写了一个小demo
一 初始
逻辑很简单就是一个新增和删除方法，vue3.0是兼容2.0的所以很多语法还是不变的，这个是最初方法，把所有的逻辑都写在setup里面，这个时候其实会疑惑这样写逻辑太多怎么办，所以就有了进化版本。看到引入reactive这个时候，感觉后面应该会有react的味道，后面整理我感觉还是有点意思的。
<template><input v-model="state2.info.id" /><input v-model="state2.info.name" /><input v-model="state2.info.age" /><button @click="addStu">添加</button><div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">{
{item.name}} --- {
{item.age}}</div>
</template><script>
import { reactive } from 'vue' //首先要引入reactive
export default {setup() {let state = reactive({stus: [{id: 1, name: '1s', age: 10},{id: 2, name: '2s', age: 20},{id: 3, name: '3s', age: 30},]})function remStu(index) {state.stus = state.stus.filter((stu, idx) => idx != index)}//点击行删除let state2 = reactive({info: {id: null,name: null,age: null}})function addStu(e) {e.preventDefault()const stu = Object.assign({}, state2.info)state.stus.push(stu)state2.info.id = ''state2.info.name = ''state2.info.age = ''}//新增一条数据return { state, remStu, state2, addStu } //必须要把数据return出去},
}</script>
二 整理
这时候把方法从setup里面抽离出去，看到这里时候感觉有那味道了，这个时候感觉舒服多了也很熟悉了，把方法抽离出去每个逻辑在自己的方法内执行，有点意思，到了下面还有更6的操作。
<template><input v-model="state2.info.id" /><input v-model="state2.info.name" /><input v-model="state2.info.age" /><button @click="addStu">添加</button><div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">{
{item.name}} --- {
{item.age}}</div>
</template><script>
import { reactive } from 'vue'
export default {setup() {let { state, remStu } = useRemove()let { state2, addStu } = useAddStu(state)return { state, remStu, state2, addStu }},
}function useAddStu(state) {let state2 = reactive({info: {id: '',name: '',age: ''}})function addStu(e) {e.preventDefault()const stu = Object.assign({}, state2.info)state.stus.push(stu)state2.info.id = ''state2.info.name = ''state2.info.age = ''}return { state2, addStu }
}function useRemove() {let state = reactive({stus: [{id: 1, name: '1s', age: 10},{id: 2, name: '2s', age: 20},{id: 3, name: '3s', age: 30},]})function remStu(index) {state.stus = state.stus.filter((stu, idx) => idx != index)}return { state, remStu }
}
</script>三 升级
最6的操作来了，感觉舒服了
<template><input v-model="state2.info.id" /><input v-model="state2.info.name" /><input v-model="state2.info.age" /><button @click="addStu">添加</button><div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">{
{item.name}} --- {
{item.age}}</div>
</template><script>
import { useRemove, useAddStu } from './HelloWorld'
export default {setup() {let { state, remStu } = useRemove()let { state2, addStu } = useAddStu(state)return { state, remStu, state2, addStu }},
}
</script>HelloWorld.js
import { reactive } from 'vue'export function useAddStu(state) {let state2 = reactive({info: {id: '',name: '',age: ''}})function addStu(e) {e.preventDefault()const stu = Object.assign({}, state2.info)state.stus.push(stu)state2.info.id = ''state2.info.name = ''state2.info.age = ''}return {state, state2, addStu }
}export function useRemove() {let state = reactive({stus: [{id: 1, name: '1s', age: 10},{id: 2, name: '2s', age: 20},{id: 3, name: '3s', age: 30},]})function remStu(index) {state.stus = state.stus.filter((stu, idx) => idx != index)}return { state, remStu }
}写至此感觉舒服了，就我目前菜鸟技术我觉得这里解决了我之前在项目中data里面每次会建一大堆变量，然后this来this去的问题，现在新建的变量可以知道哪个方法里面用，可以从哪个方法引，怎么去传值，最后一个HelloWorld.js中两个方法其实可以写成两个方法，单独引用都可以。
总体感觉，新的api引入会将以后开发逻辑整理的更加清晰，期待后续v3的完善
以上代码仅个人学习demo，具体的api可以参考https://composition-api.vuejs.org/#api-introduction
还有一个vue3，https://vue-next-template-explorer.netlify.app/
