引入依赖 reactive

import {reactive} from 'vue'

html 页面效果

image.png

html 页面

<template>
  <div class="c000">
      {{num.num}}
      <button class="c000" @click="addNumber">
      累加
    </button>
  </div>
  <div>
    <input v-model="state2.item.a" type="text">
    <input v-model="state2.item.b" type="text">
    <button @click="addFun">add</button>
  </div>
  <ul v-for="(item,i) in state.stus" :key="i" @click="delet(i)">
    <li>{{item.a}}=={{item.b}}</li>
  </ul>
</template>
<script>
import {removeData,addData,addNum} from './handerFun'
export default {
  name: 'Home',
  components: {  
  },
  setup(){
    let {state,delet} = removeData()
    let {state2,addFun} = addData(state);
    let {num,addNumber}  =  addNum()
    return {state,delet,state2,addFun,addNumber,num}
  }
}
</script>
<style lang="scss">
.c000{
  color:#000;
  font-size: 30px;
}
</style>

处理业务逻辑方法js

import {reactive} from 'vue'
function removeData(){
  let state = reactive({
        stus:[{
          a:1,b:2
        },
        {
          a:5,
          b:9
        }]
      })
  function delet(i){
    state.stus = state.stus.filter((ele,index)=> index !=i)
  }
  return {state,delet}
}

function addData(state){
  let state2= reactive({
    item:{
      a:'',
      b:''
    }
  })
  function addFun(e){
    e.preventDefault();
    let item = Object.assign({},state2.item);
    state2.item.a = '';
    state2.item.b = '';
    state.stus.push(item)
  }
  return{state2,addFun}
}

function addNum(){
  let num = reactive({
    num:0
  })
  function addNumber(){
      num.num++
  }
  return {num,addNumber}
}
export  {removeData,addData,addNum}

参考地址

获取 demo 地址

https://e.coding.net/Allen68798/vue3.0-demo/vue3.0_demo.git

vue3.0 官方文档

https://v3.vuejs.org/guide/introduction.html