vue3基本使用笔记（汇集精华版）

Vue3

Vue3优点

1.首次渲染更快

2.diff算法更快

• 因为vue2中的虚拟dom是进行全量的对比，而vue3中新增了静态标记，只比对带有PF的节点，并且通过Flag的信息得知当前节点要比对的具体内容

3.内存渲染更好

4.打包的体积更小

5.更好的TS支持

6.template中不用在嵌套一层根标签

• 因为内部会将多个标签包含在一个Fragment的虚拟元素中 ，且该元素不会再dom树中呈现

template>
    <div>芜湖</div>
    <div>起飞</div>
</template>

7.组合式API，vue2则是选项是API ； 组合式api可以提高组件复用性 更好维护

Vue3中的main文件挂在组件

import {
    createApp } from 'vue'
import App from './App.vue'
// 根据App组件创建一个应用实例
const app = createApp(App)
// app应用挂载（管理）index.html的 #app 容器
app.mount('#app')

注意：vue3中的是使用的createApp（）管理容器，不是new Vue（）

setup函数

setup函数是vue3中特有函数，作为api中的起点 ； 从组件生命周期看，它在beforeCreate 之前执行

函数中的this不是组件实例，是undefined ； 如果数据或者函数在模板中使用，需要setup返回

<template>
  <div class="container">
    <h1 @click="say()">{
   {
   msg}}</h1>
  </div>
</template>

<script>
export default {
   
  setup () {
   
      
      return{
   }
  }
}
</script>

注意：在vue3中的setup中用不到this，所有东西通过函数获取

setup语法糖

为了让代码更加简洁，可以用语法糖 ； 这样省略了导出配置项，setup函数声明和需要return数据

<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/logo.png" />
  <hr />
  计数器：{
  { count }} <button @click="increment">累加</button>
</template>

<script setup>
  // 显示隐藏
  const show = ref(true)
  const toggle = () => {
    show.value = !show.value
  }
  // 计数器
  const count = ref(0)
  const increment = () => {
    count.value ++
  }
</script>

注意：script setup中的变量也可以直接在模板中使用

reactive函数

使用reactive定义对象数组类型的响应式数据

使用：

• 从vue中导出reactive函数
• 在setup函数中，使用reactive函数，传入一个普通对象，返回一个响应式数据对象
• 最后在setup函数中返回一个对象，包含该响应式对象就可以在模板中使用

<template>
  <div>
    <p>姓名：{
   {
   state.name}