08-初始vue3

标签：Vue const 08 createApp reactive vue3 import app 初始

写在前面

https://juejin.cn/post/7106374777601785893

https://juejin.cn/post/7253828299938906169

配置项写法

<body>
    <div id="app">
    </div>
</body>
<script>
    const app = Vue.createApp({
        // ...
    })
    app.mount("#app")
</script>

配置项写法示例

<body>
    <div id="app">
        <button @click="count--">-</button>
        {{count}}
        <button @click="count++">+</button>
    </div>
</body>
<script>
    // 使用Vue.createApp创建了一个Vue应用程序实例。
    const app = Vue.createApp({
        data() {
            return {
                count: 3
            }
        },
    })
    // 使用app.mount("#app")将Vue应用程序实例挂载到id为"app"的div上，这样Vue应用程序就能够控制这部分HTML代码了。
    app.mount("#app")
</script>

组合式api写法

<body>
    <div id="app">
        <button @click="count--">-</button>
        {{count}}
        <button @click="count++">+</button>
    </div>
</body>
<script>
    const app = Vue.createApp({
        // setup函数用于设置组件的响应式数据，并返回必要的数据和方法。
        setup(props) {
            // let count = 3 无法双向绑定，如果要让值设置成响应式，需要使用Vue.ref(属性)
            let count = Vue.ref(3)
            return {
                count
            }
        }
    })
    // 使用app.mount("#app")将Vue应用程序实例挂载到id为"app"的div上，这样Vue应用程序就能够控制这部分HTML代码了。
    app.mount("#app")
</script>

通过点击事件触发函数操作

<body>
    <div id="app">
        <button @click="subCount">-</button>
        {{count}}
        <button @click="addCount">+</button>
    </div>
</body>
<script>
    const app = Vue.createApp({
        setup(props) {
            let count = Vue.ref(3);
            
            // 定义函数，函数名称就是触发点击事件后执行的函数
            function subCount() {
                count.value--
            }
            
            function addCount() {
                count.value++
            }
            
            // 别忘记返回
            return {
                count,
                subCount,
                addCount
            }
        }
    })
    // 别忘记挂载
    app.mount("#app")
</script>

将容器类型做成响应式

语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3</title>
    <script src="../js/vue3.js"></script>
</head>
<body>
    <div id="app">
        <button @click="subAge">年龄-1</button>
        <p>
            <span>姓名：{{hero.name}}</span>
            <span>年龄：{{hero.age}}</span>
            <span>爱好：{{hero.hobby.join('、')}}</span>
        </p>
        <button @click="addAge">年龄+1</button>
    </div>
</body>
<script>
    const {createApp, reactive} = Vue
    const app = createApp({
        setup(props) {

            const baseData = {name: '小满', age:3, hobby: ['逃课', '摸鱼']}
            // const hero = Vue.reactive(baseData)
            const hero = reactive(baseData)
            function subAge() {
                hero.age--
            }

            function addAge() {
                hero.age++
            }

            return {
                hero,
                subAge,
                addAge
            }
        }
    })
    app.mount("#app")
</script>
</html>

简单总结

setup
# 1 如果使用配置项API---》写起来跟vue2一样
# 2 如果写组合式API---》所有代码都要写在setup函数中
	-后期除了setup函数，其他都不带了
    
# 3 setup函数必须返回变量或函数--》在template中才能使用
# 4 默认不带响应式，需要使用ref或reactive包裹


ref和reactive
# 1 ref 包裹值类型[数字，字符串，布尔]，做成响应式
# 2 reactive包裹引用类型[对象，数组]，做成响应式
# 3 使用reactive包裹的对象，直接通过 .  [] 取值赋值就是响应式的
	ref包裹的对象，需要使用 对象.value 修改值
# 4 使用ref包裹的，在template中，不许用使用 变量.value

import {} from 'Vue' 和 const {} = Vue 的区别

import {} from 'Vue' 和 const {} = Vue 是两种不同的导入 Vue 的方式，它们的区别在于语法和用途。

import {} from 'Vue':
- 这是 ES6 的模块导入语法，用于导入模块中的特定成员。
- 当你使用 import {} from 'Vue' 时，你可以选择性地导入 Vue 模块中的特定成员，例如 createApp、reactive 等。
- 例如：import { createApp, reactive } from 'Vue'
const {} = Vue:
- 这是从一个对象中解构出特定成员的 JavaScript 语法。
- 当你使用 const {} = Vue 时，你是从 Vue 对象中解构出特定的成员，使得你可以直接使用这些成员，而不需要每次都写 Vue.xxx。
- 例如：const { createApp, reactive } = Vue

综上所述，两种方式都可以用来导入 Vue 模块中的特定成员，但是语法略有不同。 import {} from 'Vue' 是 ES6 的模块导入语法，而 const {} = Vue 是从对象中解构出特定成员的 JavaScript 语法。

使用vite创建项目

https://cn.vitejs.dev/

执行命令

npm create vite@latest //创建项目
npm create vite@latest name // 创建项目的时候可以带名称

vue3使用router-view

在src下面新建一个文件夹router，然后里面新建一个index.js文件
在index.js中，写入逻辑。

import { createRouter, createWebHistory } from 'vue-router'

// 注意 这里一定要叫 routes 不然报错 Cannot read property ‘forEach‘ of undefined
const routes = [
    {
        path: "/book",
        name: "book",
        component: () => import("../views/BookView.vue")
    },
    {
        path: "/",
        name: 'home',
        component: () => import("../views/HomeView.vue")
    }
]

const router = createRouter({
    // history: createWebHashHistory, hash模式
    history: createWebHistory(), // history模式
    routes
})

export default router

在main.js中

import { createApp } from 'vue'
import router from "./router/index.js"
import './style.css'
import App from './App.vue'

const app = createApp(App)
app.use(router);
app.mount("#app")

在App.vue中

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

完成。

标签：Vue,const,08,createApp,reactive,vue3,import,app,初始
From： https://www.cnblogs.com/ccsvip/p/18175950