vue2转战vue3的简单步骤第一部分

学习vue3

1. 创建vue3项目

1. 熟悉命令行
2. 已安装 18.0 或更高版本的 Node.js
3. npm create vue@latest

https://cn.vuejs.org/guide/quick-start.html

2. 组合式API

2.1 setup

2.2 响应式对象

2.2.1 reactive(只能是对象)

// 响应式对像
const state = reactive({
   
    count: 0
})
const addCount = () => {
   
    state.count++
    console.log(state.count)
}

<div>{
  { state.count }}</div>
<div @click="addCount" style="padding: 5px 10px;">addCount++</div>

2.2.2 ref(支持任意类型)

// ref 响应式对象
import {
   ref} from "vue";
// 1 对像形式
const num = ref({
   
    count: 0
})
const addCount = () => {
   
    num.value.count++
    console.log(num.value.count)
}
// 2 简单类型 数字、字符、布尔
const num2 = ref(0)
const addCount2 = () => {
   
    num2.value++
    console.log(num2.value)
}
// 3 数组
const num3 = ref([0, 1, 2])
setInterval(function () {
   
    num3.value.push(num3.value.length + 1)
}, 2000)

<template>
    <div>
        <div @click="addCount" class="btn">{
  { num.count }}</div