vue: vue3和vue2用法区别

支持vue3的组件库： Element-plus Vant 3.0 Ant-design-vue

vue2两个问题：对复杂组件难以维护；对typescript支持不够；(此时就可以用vue3)

1. diff算法优化：
   在一个组件下，对有插值表达式和动态属性的dom做了标记。虚拟Dom的diff比较时就不用比较所有页面的所有的dom元素差异
   // 也就是跳过静态节点，只处理动态节点
2. tree shaking (去掉了未使用的api):
   不适用不会引入v-model,transition相关代码

1）Composition API
90%的vue2(optionsAPI)代码在vue3(Composition API)中不受影响
// 能用compositioin抽逻辑就不要用mixin,因为composition可以完全替代mixin
即组合使用reactive ref watchEffect这三个
2）Fragment碎片
不再限制单文件组件只能有一个根节点
3)teleport 指定组件渲染的位置
4)suspense
5)完全支持ts,支持tsx。体验效果很好
// vue3.0 是由ts重写的
6）custom renderer API
// 自定义 render 函数的 API
7）vite热加载，相比webpack基本加载在100ms以内

4. vue全家桶-改动
   1）vuex基本没有任何改动
   2）router有一些api的改动
   3）CLI: vue-cli-plugin-vue-next生成vue3项目
   4)vite
   实验性，快速生成单文件组件
   5）vue-test-utils
   // 在做vue3兼容
   6）Vetur组件库在跟进vue3.0更新

开始vue3项目

一： 使用vite初始化vue3项目

npm install create-vite-app --save-dev //也可以全局下载
npx create-vite-app project-name // 项目
npm install
npm run dev
npm run build
// 下载插件
npm i vue-router@next
npm i vuex@next
npm i vant@next -S

// src/srouter.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/home/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // route -> routes
    {
      path: '/',
      name: 'home',
      component: Home,
    }
  ],
})

export default router

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import router from './router'
// import store from './store' 

const app = createApp(App)
app.use(router)

app.mount('#app')

// app.vue
<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <!-- <HelloWorld msg="Hello Vue 3.0 + Vite" /> -->
  <router-view> </router-view>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  }
}
</script>

就可以创建一个vue3项目了

下载后，就使用vant组件库

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import router from './router'

// 引入vant组件和全局样式
import { Button } from 'vant';
import 'vant/lib/index.css';

const app = createApp(App)
app.use(router)

 // 注册vant组件
app.use(Button)

app.mount('#app')

二： 使用vue-cli创建vue3项目

npm i -g @vue/cli // vue-cli4.5以上的版本才能创建vue3(vue --version查看版本)
vue ui
--自定义预设-选择功能-选择vue3 previe,不要选class-创建

文件描述

• ts的语言服务需要.d.ts文件来识别类型，这样才能做到相应的语法检查和智能提示

三： 强烈建议使用vite创建vue项目

使用 vue3和vue2用法区别

–怎么写方法？

（onRenderTracked, onRenderTriggered检测数据的钩子）