VUE3 ONE-PIECE

VUE3 ONE-PIECE

1.初识VUE3

1.使用vite创建vue3工程

npm init vite-app vue3_test_vite

• vite 启动速度快*

2.工程结构

VUE3不再引入vue构造函数而是 引入一个 createapp 的工厂函数

import { createApp } from 'vue' 
import App from './App.vue'
//创建app实例对象类似于vm 但是app比vm更加轻 
//mount 挂载 unmount 卸载
ceateApp(App).mount('#app')

原VUE2

import Vue from 'vue'
new Vue({
    render: (h)=> {return h('App')}
}).$mount('#app')

3.templete标签

可以直接 写标签不用再在 templete 里包 div

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

2.常用的composition API (组合式API)

compositionAPI 太抽象了 兄弟们

1.拉开序幕的setup

vue3 的新配置项 setup 是所有的 composition API 表演的舞台

vue3 中所有的: data method computed 均要配置到setup里

setup 的返回值可以直接在 模板 、方法 中调用

setup 可以返回一个 渲染函数

setup() {
    let name = 'zs';
    let age = 12;

    function showName() {
      alert(name)
    }
    return { //setup的返回值
      name,
      age,
      showName
    }
  }

注意 ： 1. 不要将 vue2 与 vue3 混用，当两者发生冲突是会以vue3为主

   2.setup 不能是一个 async 函数，因为其返回值不是return里的对象而是一个promise

2.ref函数

定义一个相应式数据

1.普通数据 与 响应式 数据

傻