vue3 快速上手（第一篇）vue3.x相对于vue2.x的最新特性 vue3 性能更高, 体积更小, 更利于复用, 代

vue3.x相对于vue2.x的最新特性

vue3 性能更高, 体积更小, 更利于复用, 代码维护更方便

1.使用vite创建项目

npm create vite / yarn create vite

2.输入项目名字，默认为vite-project

3.选择创建的项目类型，选择vue即可

4.选择创建的vue项目类型，不选ts

5.启动项目

vue3中需要安装插件volar，提供了更加强大的功能。

Vite

极速的服务启动，使用原生 ESM 文件，无需打包

组合API-setup函数

setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
setup 中不能使用 this， this 指向 undefined
setup函数在beforeCreate生命周期钩子执行之前执行
在模版中需要使用的数据和函数，需要在 setup 返回

组合API-用ref函数来获取Dom实例对象

    // 导入ref函数 
    `import { ref } from 'vue'
    
    <div ref="dom">我是box</div>
    <button @click="hClick"></button>
    
    // 1. 获取单个元素
    const dom = ref(null)
    // 获取值 .value
    console.log(dom.value)
    
    //组合API-用reactive函数定义响应式数据
    import { reactive， toRefs } from 'vue'
    
  const toNum = reactive({name: 'ayang',salary: 18000})
    // 解构方法需要 toRefs
    // 将响应式中所有属性转为响应式数据，通常用于解构|展开reactive定义对象
    let { name,salary } = toRefs(toNum)

    const num = () => {
      salary.value = 1000000000000
    }

script setup语法

要使用这个语法，需要将 setup attribute 添加到script代码块上

<script setup>
import { ref } from 'vue'

组合API-用computed函数定义计算属性，用reactive函数定义响应式数据，用toRefs函数简化响应式数据的使用

// 1. 从vue框架中导入`computed` 函数
import { ref, reactive, toRefs, computed } from 'vue'
    
<p>姓名：{{name}}------月薪：{{salary}}-------年薪{{ totalMoeny }}</p>
<button @click="num">＋ 钱</button>

const toNum = reactive({name: 'ayang',salary: 18000})
    //toRefs 解构 简化 
    let { name,salary } = toRefs(toNum)
    const num = () => {
      salary.value = 1000000000000
    }

    // 2. 在setup函数中执行computed函数，并传入一个函数
    const totalMoeny = computed(() => {
      return salary.value * 15
    })

组合API-computed的高级用法

给computed传入对象，get获取计算属性的值，set监听计算属性改变

在v-model绑定计算属性： < input v-model="total" />

<script setup>
  import { computed, ref } from 'vue'

  const stu = ref({stuName: 'susu', month: 13})

  const totalMoney = computed({
    get() {
      return stu.value.month * 10
    },
    set(value) {
      console.log('set', value)
    }
  })
    
<template>
  {{ stu.stuName }}---{{ stu.month }}---{{ totalMoney }}
  <input v-model="totalMoney" />
</template>

组合API-watch函数

导入。import { watch } from 'vue'
在setup函数中执行watch函数开启对响应式数据的监听
watch函数接收三个常规参数：

第一个参数有三种取值：参数类型：(3种)任意类型：要监听的响应式数据数组：每个元素是响应式数据函数：监听对象的某一个属性
第二个参数是：响应式数据变化之后要执行的回调函数,
第三个参数是: 一个对象，在里面配置是否开启立刻执行或者深度监听

注意

watch监听ref包裹的对象时，要开启深度监听

<script setup>
  import { watch, reactive } from 'vue'

  const stu = reactive({stuname: 'aming', score: 90})

  const change = () => {
    stu.score = 99
  }

  watch(stu, (value) => {
    console.log('stu', value)
  })
</script>

<template>
  <button @click="change">控制</button>
</template>

父传子

:sonMoney="money"
    
    //子
    const props = defineProps({
    sonMoney: {
      type: Number,
      default: 1
    }
  })

子传父

const addMoney = () => {
    emit('addMoney', 10000)
  }

// 父
@addMoney="handMoneyRequest"

祖先传后代

祖先组件中提供数据： provide('数据名', 数据)
后代组件中使用数据： const data = inject('数据名')

vue3 快速上手（第一篇）