Vue3 - 语法及使用基础示例（reactive）

前言

使用 vue3.x 写的基础小示例，效果如下图所示：

实现

请注意，以下代码是通过 vue-cli 创建，请自行引入或安装 vue。

  
    
    
    更改方法
    重置方法
    
    {{ data.box }}----{{ data.msg }}
    

  



import { reactive } from '@vue/reactivity'
export default {
  setup(){

    // 更改方法
    let { data, ALART, RESET } = tools()
    return {
      data, ALART, RESET
    }

  }
}

/**
 * 工具库
 * @description 含更改、重置
 * @returns { data, ALART }
 */
function tools(){
  //TODO data
  const data = reactive({
      msg: 'hello world',
      box: [
        {
          uid: 1,
          name: '李栓蛋'
        },
        {
          uid: 2,
          name: '张大鸡'
        },
        {
          uid: 3,
          name: '刘二虎'
        }
      ]
  })

  //TODO methods
  function ALART(){
    data.msg = '数据已变更...'
  }
  function RESET(){
    data.msg = 'hello world'
  }
  
  //TODO return
  return { data, ALART, RESET }
}