【前端30_Vue 3.0】初体验 Vue 3

Vue 3 初体验

起步

参考

• 本笔记参考开课吧的web全栈课进行记录的，有兴趣可以看看那边的课程（资深白嫖党，不过有工资的话会考虑买一个学学）

安装 vue3

# 全局安装
cnpm i -g create-vite-app
# 如果是苹果mac，在安装的时候后面加上 --unsafe-perm （解决权限的问题）

#
create-vite-app vue3-camp
cd vue3-camp
cnpm i
# 用 vscode 打开
code ./ -a			

# 运行项目

运行程序：cd 到新建的项目根目录下（我这里就是vue3-camp），终端输入npm run dev 就可以启动项目

option api 就是对象 api

composition api 新语法

Hello Vue3

简单的demo

<template>
    {{count}}
    <button @click="add">点击</button>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
// 最简单的 composition
export default {
    setup() {
        let count = ref(1);
        function add() {
            count.value++;
        }
        return { count, add };
    },
};
</script>

可以跟 vue2 混着用

todo功能

<template>
    <h1>{{ count }}</h1>
    <ul>
        <!-- <li v-for="todo in state.todos">{{todo.name}}</li> -->
        <input type="text" @keyup.enter="addTodo" v-model="state.val" />
        <li v-for="(todo, index) in state.todos" :key="index">
            {{ index + 1 }}.{{ todo.name }}
        </li>
    </ul>
    total:{{total}}
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
// ref 是把简单数据类型变成响应式
import { ref } from "vue";

// reactive 是把复杂数据类型变成响应式
import { reactive, unref, computed } from "vue";
export default {
    setup() {
        let count = ref(1);
        let state = reactive({
            todos: [{ name: "你好" }, { name: "你好1" }, { name: "你好2" }],
            val: "",
        });
        function addTodo() {
            state.todos.push({
                name: state.val,
            });
            state.val = "";
        }
        // 计算属性
        let total = computed(()=>state.todos.length)
        // 把复杂数据类型展开：用纯净的数据，不需要state
        return { count, addTodo, state, total};
        // return { count, add ,state};
    },
};
</script>

文件抽离

函数抽离

抽离函数的作用，其实也是封装的结果，这个是抽离到外部函数中

<template>
    <h1>{{ count }}</h1>
    <ul>
        <!-- <li v-for="todo in state.todos">{{todo.name}}</li> -->
        <input type="text" @keyup.enter="addTodo" v-model="state.val" />
        <li v-for="(todo, index) in state.todos" :key="index">
            {{ index + 1 }}.{{ todo.name }}
        </li>
    </ul>
    total:{{ total }}
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
// ref 是把简单数据类型变成响应式
import { ref } from "vue";

// reactive 是把复杂数据类型变成响应式
import { reactive, unref, computed } from "vue";
export default {
    setup() {
        let { count, addTodo, state, total } = useAddTodo();
        // 把复杂数据类型展开：用纯净的数据，不需要state
        return { count, addTodo, state, total };
        // return { count, add ,state};
    },
};
// 这个就叫函数的抽离
function useAddTodo() {
    let count = ref(1);
    let state = reactive({
        todos: [{ name: "你好" }, { name: "你好1" }, { name: "你好2" }],
        val: "",
    });
    function addTodo() {
        state.todos.push({
            name: state.val,
        });
        state.val = "";
    }
    // 计算属性
    let total = computed(() => state.todos.length);
    return { count, addTodo, state, total };
}
</script>

当然我们可以新建一个 useAddTodo.js 文件，然后把函数抽离出来，并且export defalut导出

并在 app.vue 中引入并调用即可

// 这个我理解的是函数的抽离
// useAddTodo.js
import { ref, reactive,computed } from "vue";
function useAddTodo() {
    let count = ref(1);
    let state = reactive({
        todos: [{ name: "你好" }, { name: "你好1" }, { name: "你好2" }],
        val: "",
    });
    function addTodo() {
        state.todos.push({
            name: state.val,
        });
        state.val = "";
    }
    // 计算属性
    let total = computed(() => state.todos.length);
    return { count, addTodo, state, total };
}

export default useAddTodo;

Vite 下一代的脚手架工具

编译时的优化

性能

compiler

静态标记

ssr对比