vue3.0 组合API用法

引入依赖 reactive

import {reactive} from 'vue'

html 页面效果

image.png

html 页面

处理业务逻辑方法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