初识vue3一

最新推荐文章于 2025-04-28 08:49:01 发布

米白蓝

最新推荐文章于 2025-04-28 08:49:01 发布

阅读量1.5k

点赞数

分类专栏： vue3 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_50563868/article/details/124646474

版权

vue3 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue3的主要变化，包括源码升级和拥抱TypeScript。在Vue3中，使用`createApp`来创建应用，组件模板可以不包含根标签。setup函数成为核心，用于组织数据、方法和计算属性，它可以返回对象或渲染函数。Vue3还向下兼容Vue2，但建议避免混用写法，setup函数不应是异步的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//main.js入口文件
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
console.log(app);
app.mount('#app')
// setTimeout(() => {
//   app.unmount('#app')
// }, 1000);

  <!-- App.vue -->
<template>
  <div>
    <h1>我是APP组件</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄： {{ age }}</h2>
    <h2>性别： {{sex}}</h2>
    <button @click="sayHello">说话</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      sex: '男'
    }
  },
  setup() {
    // 数据
    let name = "zhangsan";
    let age = 18;
    function sayHello() {
      console.log(`我叫${name},今年我${age}岁了`);
    }
    return {
      name,
      age,
      sayHello,
    };
  },
};
</script>

1.源码的升级、拥抱了TypeScript；
创建：vue create 项目名；
入口文件：main.js:引入的不再是Vue构造函数，引入的是一个名为createApp的工厂函数；
vue3中的组件的模板中可以没有根标签；
组件中的setup()函数，vue3中需要将数据、方法、计算属性等等都写在setup函数中，它有两种放回值：1.返回一个对象：可以在模板中直接使用；2.返回一个渲染函数；
vue3向下兼容，在组件中也可以直接data(),methods等；但是最好vue2和vue3的两种写法不要混用，并且若果2和3冲突的时候，以setup中的优先，setup不能是一个async函数；