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有以下特点:

  1. 函数形式setup 是一个函数,可以接收参数(后续会介绍)。

  2. 两个返回值

    • 如果返回一个对象,该对象中的方法、属性都可以在模板中直接使用。
    • 如果返回一个渲染函数,则可以自定义渲染内容(这种方式用得比较少)。
  3. 创建时机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>

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

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

相关推荐
贵沫末12 分钟前
React——基础
前端·react.js·前端框架
aklry24 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9331 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子31 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982432 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug34 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo34 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler2811 小时前
解决setTimeout/setInterval计时不准确问题的方案
前端