Vue2到Vue3的过渡

Vue2到Vue3的过渡 part1

1.Vue3的特点

使用了组合式API,提高了代码的可维护性
性能提升较大，响应式系统优化，重写了虚拟Dom
改进了对TypeScript的支持

还有别的一些特点，还想了解更多大家可以访问github查看

2.工程的创建

现在我们用Vite来创建我们的Vue3环境,打开命令窗口

1.输入npm create vite@latest

2.输入项目名字

3.选择框架(例如Vue)

4.进入项目目录

5.安装依赖并运行 npm install npm run dev

出现这个就表明创建成功了，接下来就可以打开vscode编写代码了

首先在main.js中，我们不再使用new Vue()来创建vue的实例对象，而是通过以下代码来实现

javascript 复制代码

import { createApp } from 'vue' //引入工厂函数，而不是引入Vue
//创建应用实例对象，就类似于之前的vm，但app比vm更轻
const app=createApp(App)
//挂载
app.mount("#app")

这里的轻呢，是指比Vue2中的实例对象，Vue3中的实例对象中的方法更少了，大家可以自行打印，在控制台中观察一下

进入我们的正文，来看我们的第一个组合式api，setup

Setup

大家都知道在vue2中我们都这样写配置项

javascript 复制代码

export default{
 name:'App',
 data(){},
 methods:{},
 beforecreate()[}
}

我们的data，methods，生命周期钩子都分开来写，但在Vue3中不同这些配置项统统放到setup函数中下面我们就来介绍一下setup

在vue3中，setup有以下特点：

函数形式 ：setup 是一个函数，可以接收参数（后续会介绍）。
两个返回值：
- 如果返回一个对象，该对象中的方法、属性都可以在模板中直接使用。
- 如果返回一个渲染函数，则可以自定义渲染内容（这种方式用得比较少）。
创建时机 ：setup 函数在 beforeCreate 生命周期钩子之前执行。

实践代码

下面我们通过代码来实践一下 setup 函数的基本用法（暂时不考虑响应式）。

xml 复制代码

<template>
  <h1>一个人的信息</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <button @click="sayHello">点我说话</button>
</template >

<script>
  export default{
    name:'App',
    //暂时不考虑响应式
    setup(){
      
     //data数据
     let name='张三'
     let age =18

     //方法
     function sayHello(){
      alert(`我叫${name},我${age}岁了,你好啊`)
     }
     
     //一定要记得方法，不返回模板读不出来
    return {
      name,
      age,
      sayHello
    }
   }
  }
</script>

运行上述代码后，页面会渲染出一个人的信息，并可以通过点击按钮触发弹窗。

这样我们就可以将数据渲染到页面上了。关于响应式数据定义，下一篇文章再给大家详细介绍