vue3 学习笔记一上手篇

本文作为vue3学习笔记记录复习之用。

准备阶段：首先安装环境node.js, 版本需为16.0 或更高版本的Node.js。

下载地址：nodejs.org/

开发工具： vs code

一.创建Vue3项目：

npm create vue@latest 或者 npm init vue@latest
在创建项目中提示组件安装，如是练练项目的可全部选择NO，如是项目开发的，建议初始安装route、pinia、axios、ESlint这几个基本组件。
创建成功后，使用： npm install 安装依赖包， npm run dev  运行项目，看到vue3 使用帮助页，说明项目运行成功。

二.熟悉vue3项目文件

1.vite.config.js：项目配置文件基于**vite的配置**
2.package.json:核心依赖包基于**vue3.x和vite**
3.main.js:入口文件变成了**createApp**函数创建应用实例。
4.app.vue:根组件默认顺序变化 **script-templat-style**
  变化1：脚本scrip和模板template顺序变化。
  变化2：模板template不再要求唯一根元素。
  变化3：脚本script增加setup标识支持**组合式API**。
5.index.html:入口提供id为app的挂载点。

三.组合式API-setup

1.setup选项的写法和执行时机，在**beforCreate**之前。
2.setup选项中写代码的特点和使用，首先定义数据和函数，然后return出去就OK。例：
`<script>
        export default {
          setup() {
            const mes = "这是setup";
            const mesShow = () => {
                 console.log("mes", mes);
                 };
            return { mes, mesShow };
          },
        };
 </script>
 <template>
      <div>{{ mes }}</div>
      <button @click="mesShow"></button>
  </template>`

3.setup选项语法糖写法。例：
  `<script setup>
         const mes = "这是setup";
           const mesShow = () => {
                console.log("mes", mes);
            };
   </script>`

四.组合式API-reactive和ref

1. reactive 作用：接受对象类型数据的参数传入，并返回一个响应式的对象。就是说，你传给我一个对象，我给你一个响应式对象。
使用步骤:首先从vue中导入reactive函数，然后执行函数就OK。
例`import{reactive} from 'vue'
    const obj=reactive(对象类型数据)`
2.ref函数的作用和reactive一样，但ref可以接受简单类型和对象类型，一般在项目中使用ref就行。还有一个不同，script里修改ref数据，必须带上定义名.value获取和修改数据。