vue3的基本使用

vue3基本使用方式

import {ref , reactive} from 'vue' // reactive只有传入复杂类型(json/arr)才会成为响应式
export default {
  name: 'App',
  // setup函数是组合api的入口函数
  // 执行时机在beforeCreate之前，所以此时是无法使用data/methods
  // 由于不能在setup不能访问data/methods，此时的this的值为undefined
  // setup只能是同步的
  setup () {
    let {state, deleteLine} = diyFun()
    let count =  ref(0)
    return {state, deleteLine, count} // 暴露出去之后就可以使用这些变量了
  }
}
function diyFun() {
  let state = reactive({
    stus: [
      {id: 1, name: 2, age: 3},
      {id: 2, name: 3, age: 4},
      {id: 3, name: 4, age: 5},
      {id: 4, name: 5, age: 6}
    ]
  })
  function deleteLine(index) {
    console.log(index)
    state.stus.splice(index, 1)
  }
  return {state, deleteLine}
}

reactive传递的参数必须是object/arr
如果传递了其他的对象，默认情况下修改对象，界面不会自动更新，如果想要
更新，可以通过重新赋值的方式

// 重新赋值
function changeTime() {
  let stateDate = reactive({
    time: new Date()
  })
  function changeDetail() {
    let data = new Date(stateDate.time.getTime())
    data.setDate(stateDate.time.getDate() + 1)
    stateDate.time = data
  }
  return {stateDate, changeDetail}
}