浅识 vu3 的初步使用

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

创建 vue3 项目

1. cmd 打开黑窗口
2. npm init vite-app (文件名, 遵循书写规范)
3. cd 进入项目
4. npm i 
5. yarn dev 或 npm run dev 启动项目

vue3 的初步使用

<template>
  <div>
    <h1>{{age}}</h1>
    <button @click="foo">点击事件</button>
  </div>
</template>

  // setup 里面定义数据 方法
  setup () {
    const age = 18
    const foo = () => {
      console.log('Hello');
    }
  // 必须 return 导出
    return {age, foo}
  }

reactive

1. reactive 用于把普通数据包装成响应式 示例:

// 按需导入 reactive
import { reactive } from 'vue'
export default {
  setup () {
    // 用括号把普通数据包裹起来使用
    const arr = reactive(['a', 'b', 'c'])
    const del = (ind) => {
      arr.splice(ind, 1)
    }
    return {arr, del}
  }
}