网站导航
> 文档中心 > 【Vue3之入门】

【Vue3之入门】

网友: 文档中心 2022-04-13 16:12:44

Vue3之入门

    • 创建项目
      • 使用Vue-cli方式创建（脚手架）
      • 使用vite创建
      • Vue项目结构
    • 认识setup
    • ref函数
    • reactive函数
    • 总结

Vue3这个新的框架的主要版本提供了改进的性能、更小的包大小、更好的 TypeScript 集成、用于处理大规模用例的新 API，以及为框架的未来长期迭代奠定了坚实的基础。

创建项目

使用Vue-cli方式创建（脚手架）

想要使用脚手架来创建Vue3的项目，必须要求Vue手脚架的版本在4.5.0以上，所以，小伙伴们，先看看自己的手脚架版本是否符合要求吧

查看Vue版本:

vue --version

假若自身Vue-cli版本低于4.5.0，那么，请先升级一下自己的Vue手脚架在进行项目的创建

安装或升级Vue-cli(全局安装或升级):

npm install -g @vue/cli

接下来，正式创建一个Vue3项目

vue create study //项目名

表示创建成功:

在这里插入图片描述

使用vite创建

什么是Vite？

官方的回答是：新一代的前端构建工具

优势：

  • 开发环境中，无需打包操作，可以快速的冷启动
  • 轻量快速的热重载（HMR）
  • 真正的按需编译，不再等待整个应用编译完成

创建项目：

npm init vite-app vue3_study  //项目名称

表示创建成功：

在这里插入图片描述

进入项目，安装依赖：

cd XXXnpm i

Vue项目结构

├── node_modules ├── public│   ├── favicon.ico: 页签图标│   └── index.html: 主页面├── src│   ├── assets: 存放静态资源│   │   └── logo.png│   │── component: 存放组件│   │   └── HelloWorld.vue│   │── App.vue: 汇总所有组件│   │── main.js: 入口文件├── .gitignore: git版本管制忽略的配置├── babel.config.js: babel的配置文件├── package.json: 应用包配置文件 ├── README.md: 应用描述文件├── package-lock.json：包版本控制文件

与Vue2main.js文件中最明显的差别：

在这里插入图片描述

组件中，可直接在根标签下写入组件标签，无需再用div包裹

在这里插入图片描述

认识setup

setup函数是Vue3中新增加的一个配置项，其值为一个函数。且setup函数是Composition API（组合API）的入口，在Vue3中，我们的数据，方法都是定义在setup函数中，且在html模板解析之前，要return出需要的数据和方法，否则是无法在模板中使用的。

举例说明：

<script>export default {  name: 'App',  setup(){    // 普通数据    let name = '路飞'    let age = 19    //方法    function sayName(){      console.log(`我叫${name}, 我${age}岁`);    }    // 返回一个对象（常用）    return{      name,      age,      sayName,    }  }}</script>

上述做法只是简单介绍了setup函数中的写法，而且，在上述这种写法中，我们并没有考虑响应式的问题，只是为了简单理解setup函数里该怎么配置数据，怎么配置方法，怎么配置返回值。我们一步一步接着往下走，后面会涉及到ref函数和reactive函数。

在setup函数中也有几个值得注意的事情，首先，既然学习了Vue3，虽然和Vue2很相似，但是在开发项目时，尽量不要与Vue2一起混用，虽然通过Vue2可以访问到Vue3中setup函数中的内容，但恰巧，Vue3的setup函数中，是访问不到Vue2中的数据，方法，计算属性等等的。

其次，假若在Vue3项目开发中出现和Vue2混用的情况，如果配置的方法名或者属性名重名的话，是以Vue3中的setup函数内的为准，Vue3中的setup函数优先级较高。

ref函数

在Vue3中，ref函数的存在，就是为了实现数据的响应式，只有使用ref函数创建的数据，才是响应式数据。

引入ref函数

import {ref} from 'vue'

在setup函数中创建响应式数据：

let name = ref('路飞');let age = ref(18);

我们来看一下ref函数创建出来的响应式数据是什么样子：
在这里插入图片描述

此时使用ref函数创建的响应式数据被封装成了一个对象，且这个对象叫做引用实现的实例对象，简称引用对象，而在这个对象中，具备getter和setter方法，也就是说，其实ref函数封装后的对象实现响应式的原理和Vue2中实现响应式的原理差不多，都是借助getter和setter方法实现的。

访问和修改响应式数据都是通过对象里的value属性实现。

修改响应式数据

function changeInfo(){  name.value = '艾斯',  age.value = 21}

页面效果，当点击按钮后，修改人物信息：
在这里插入图片描述

注意细节问题，假若设计的响应式数据是对象类型，那么在读取修改数据时，写法上有差异：

在这里插入图片描述

之所以在涉及对象响应是数据是上述写法，是因为，在Vue3中，ref函数只能处理基本数据类型的响应式，也就是说，只有基本数据类型在经过封装成引用对象后有getter和setter，引用数据是没有的。所以，在Vue3中，基本数据类型创建成的响应式数据采用的是Object.defineProperty()（也就是getter和setter方法）实现响应式，引用类型创建成的响应式数据采用reactive函数中的proxy实现响应式。

reactive函数

当我们定义一个对象或数组类型的响应式数据时，需要用到reactive函数，reactive函数的存在，是为了处理对象或数组类型的响应式数据。且注意，此函数只适用于定义一个对象或数组之类的响应式数据，不能定义基本数据的响应式数据。

语法：

import {reactive} from 'vue'......let 对象名/数组名 =reactive(具体内容)

接收对象或数组之后，返回一个代理对象，也就是proxy实例对象。

具体操作：
在这里插入图片描述

总结

以上内容是Vue3的入门介绍以及简单的响应式数据处理，本篇文章介绍了两种搭建Vue3项目的方法，容易理解。但是对于组合式API只是大略的提了一下，因为组合式API内容有点多，写在一篇文章上太枯燥了，其实接下来提到的知识点都是包含在Composition API里面的，所以在记录具体方法或者函数的时候，都结合代码来理解，希望对想学习Vue3的小伙伴们有一定帮助。

在这里插入图片描述

文章持续更新中~~~

关注我不迷路，喜欢记得点赞收藏~~

网络标签：

相关问题