初识vue3一

//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);

  
<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函数；