vue3.0学习第二天（组合API）

组合API

取消了data,methond,把他们都放在了setup()里面

1.对简单类型的变量处理

import {ref} from 'vue'

例子如下

<template>
 <div>
   <p>{{count}}</p>
   <button @click="myFn()">按钮</button>
 </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let count=ref(0);
    function myFn(){
      count.value+=1
    }
    return{count,myFn}

  }
}
</script>

2.对复杂类型的处理

import {reactive} from 'vue'

例子如下

<template>
 <div>
   <ul>
     <li v-for="(stu,i) in state.stus" :key="stu.id" @click="remStu(i)">{{stu.name}}age:{{stu.age}}</li>
   </ul>
 </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    let state=reactive({
      stus:[
        {id:1,name:'杨*',age:'20'},
        {id:2,name:'杨*',age:'19'},
        {id:3,name:'杨*',age:'21'},
      ]
    });
    function remStu(i){
      state.stus=state.stus.filter((stu,index)=>index!=i)
    }
    return{state,remStu}
  }
}

有点逐渐react化的感觉
为了使代码模块化，也就是为了让我们的开发的业务逻辑不发散一般使用如下

<template>
 <div>
   <ul>
     <li v-for="(stu,i) in state.stus" :key="stu.id" @click="remStu(i)">{{stu.name}}age:{{stu.age}}</li>
   </ul>
 </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    const {state,remStu}=useRem()
     return{state,remStu}
  }
  
}
function useRem(){
  let state=reactive({
      stus:[
        {id:1,name:'杨*',age:'20'},
        {id:2,name:'杨*',age:'19'},
        {id:3,name:'杨*',age:'21'},
      ]
    });
    function remStu(i){
      state.stus=state.stus.filter((stu,index)=>index!=i)
    }
    return{state,remStu}
}
</script>

例子如下

<template>
 <div>
   <form action="">
     <input type="text" v-model="state2.stu.id">
     <input type="text" v-model="state2.stu.name">
     <input type="text" v-model="state2.stu.age">
     <input type="submit" @click="addStu">
   </form>
   <ul>
     <li v-for="(stu,i) in state.stus" :key="stu.id" @click="remStu(i)">{{stu.name}}age:{{stu.age}}</li>
   </ul>
 </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    const {state,remStu}=useRem()
    let state2=reactive({
      stu:{
        id:'',
        name:'',
        age:''
      }
    })
   function addStu(e){
      e.preventDefault();
      console.log(state2.stu)
     const stu=Object.assign({},state2.stu)
     state.stus.push(stu)
    }
     return{state,remStu,state2,addStu}
  }
  
}
function useRem(){
  let state=reactive({
      stus:[
        {id:1,name:'杨亮',age:'20'},
        {id:2,name:'杨亮',age:'19'},
        {id:3,name:'杨亮',age:'21'},
      ]
    });
    function remStu(i){
      state.stus=state.stus.filter((stu,index)=>index!=i)
    }
    return{state,remStu}
}
</script>

更加组件化，模块。