Vue 2.10

一、Vue3的优势

二、create-vue搭建Vue3项目

1. 认识 create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了vite(下一代构建工具)，为开发提供极速响应

**2.**使用create-vue创建项目

（1）前提环境条件

已安装 16.0 或更高版本的 Node.js

使用：node -v 查询

（2）创建一个Vue应用

npm init vue@latest

这一指令将会安装并执行 create-vue这一指令将会安装并执行 create-vue

三、熟悉项目目录和关键文件

项目目录和关键文件

四、组合式API - setup选项

1. setup选项的写法和执行时机

**2.**setup选项中写代码的特点

3.<script setup>语法糖

**4.**总结

<!-- <script>
export default {
  // setup
  // 1. 执行时机，比beforeCreate要早
  // 2. setup函数中，获取不到this (this是undefined)
  // 3. 数据 和 函数，需要在 setup 最后 return 才能在模板中应用
  // 问题：每次都要return太麻烦了
  setup () {
    // console.log('set函数')

    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }

    return {
      message,
      logMessage
    }
  },
  beforeCreate () {
    console.log('beforeCreate函数')
  }
}
</script> -->

<script setup>
const message = 'this is message'
const logMessage = () => {
  console.log(message)
}
</script>


<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

五、组合式API - reactive和ref函数

**1.**reactive()

（1）作用：接受对象类型数据的参数传入并返回一个响应式的对象

（2）核心步骤：

从 vue 包中导入 reactive 函数

在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值

**2.**ref()

（1）作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

（2）核心步骤：

从 vue 包中导入 ref 函数

在 <script setup> 中执行 ref 函数并传入初始值，使用变量接收 ref 函数的返回值

**3.**总结

<script setup>
// 1. reactive: 接收一个对象型的数据，返回一个响应式的对象
// 问题：如果是简单类型，怎么办呢？
// import { reactive } from 'vue'
// const state = reactive({
//   count: 100
// })
// const setCount = () => {
//   state.count++
// }

// 2. ref: 接收简单类型 或 复杂类型，返回一个响应式的对象
//    本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型
//    底层，包成复杂类型之后，再借助 reactive 实现的响应式
//    注意点：
//    1. 访问数据，需要通过 .value
//    2. 在 template 中， .value不需要加(帮我们扒了一层)

// 推荐: 以后声明数据，统一用 ref  => 统一了编码规范
import { ref } from 'vue'
const count = ref(0)
const setCount = () => {
  count.value++
}
</script>


<template>
  <div>{{ count }}</div>
  <button @click="setCount">+1</button>
</template>

六、组合式API - computed

**1.**computed计算属性函数

（1）计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法

（2）核心步骤：

导入computed函数

执行函数 在回调参数中return基于响应式数据做计算的值，用变量接收

**2.**总结

<script setup>
// const 计算属性 = computed(() => {
//    return 计算返回结果
// })

import { computed, ref } from 'vue'
// 声明数据
const list =ref([1, 2, 3, 4, 5, 6, 7, 8])
console.log(list)  // 对象
console.log(list.value)  // 数组


// 基于list派生一个计算属性，从list中过滤出 > 2
const computedList = computed(() => {
  return list.value.filter(item => item > 2)
})

// 定义一个修改数组的方法
const addFn = () => {
  list.value.push(666)
}
</script>


<template>
  <div>
    <div>原始数据： {{ list }}</div>
    <div>计算后的数据：{{ computedList }}</div>
    <button @click="addFn" type="button">修改</button>
  </div>
</template>

七、组合式API - watch

**1.**watch函数

作用: 侦听一个或者多个数据的变化，数据变化时执行回调函数

俩个额外参数：1. immediate（立即执行） 2. deep（深度侦听）

**2.**基础使用 - 侦听单个数据

（1）导入watch函数

（2）执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

**3.**基础使用 - 侦听多个数据

说明：同时侦听多个响应式数据的变化，不管哪个数据变化都需要执行回调

**4.**immediate

说明：在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调

**5.**deep

默认机制：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执

行，需要开启deep 选项

**6.**精确侦听对象的某个属性

需求：在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调

**7.**总结

<script setup>
import { ref, watch } from "vue";
const count = ref(0)
const nickname = ref('灰太狼')

const changeCount = () => {
  count.value++
}
const changeNickname = () => {
  nickname.value = '红太狼'
}

// 1. 监视单个数据的变化
//    watch(ref对象, (newValue, oldValue) => { ... })
// watch(count, (newValue, oldValue) => {
//   console.log(newValue, oldValue)
// })

// 2. 监视多个数据的变化
//    watch([ref对象1， ref对象2]，(newArr, oldArr) => { ... })
// watch([count, nickname], (newArr, oldArr) => {
//   console.log(newArr, oldArr)
// })

// 3. immediate 立刻执行
// watch(count, (newValue, oldValue) => {
//   console.log(newValue, oldValue)
// }), {
//   immediate: true,
// }

// 4. deep 深度监视，默认 watch 进行的是 浅层监视
//    const ref1 = ref(简单类型) 可以直接监视
//    const ref2 = ref(复杂类型) 监视不到复杂类型内部数据的变化
const userInfo = ref({
  name: 'htl',
  age: 18
})
const setUserInfo = () => {
  // 修改了 userInfo.value 修改了对象的地址，才能监视到
  // userInfo.value = { name: 'hettl', age: 20 }
  userInfo.value.age++
}

// deep 深度监视
// watch(userInfo, (newValue) => {
//   console.log(newValue)
// }, {
//   deep: true
// })

// 5. 对于对象中的属性，进行监视
watch(() => userInfo.value.age, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
</script>


<template>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeNickname">改昵称</button>
  <div>-----------------------</div>
  <div>{{ userInfo }}</div>
  <butto @click="setUserInfo">修改userInfo</button>
</template>

八、组合式API - 生命周期函数

**1.**Vue3的生命周期API （选项式 VS 组合式）

**2.**生命周期函数基本使用

（1）导入生命周期函数

（2）执行生命周期函数 传入回调

**3.**执行多次

生命周期函数是可以执行多次的，多次执行时传入的回调会在时机成熟时依次执行

**4.**总结

<script setup>

// beforeCreate 和 created 的相关代码
// 一律放在 setup 中执行

import { onMounted } from "vue"

const getList = () => {
  setTimeout(() => {
    console.log('发送请求，获取数据')
  }, 2000)
}
// 一进入页面的请求
getList()

// 如果某些代码需要在mounted生命周期中执行
onMounted (() => {
  console.log('mounted生命周期函数 -逻辑1')
})

// 写成函数的调用方式，可以调用多次，并不会冲突，而是按照顺序依次输出
onMounted (() => {
  console.log('mounted生命周期函数 -逻辑2')
})
</script>


<template>
</template>

九、组合式API - 父子通信

**1.**组合式API下的父传子

（1）基本思想

父组件中给子组件绑定属性

子组件内部通过props选项接收

（2）defineProps 原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

**2.**组合式API下的子传父

基本思想

（1）父组件中给子组件标签通过@绑定事件

（2）子组件内部通过 emit 方法触发事件

**3.**总结

<!-- 父组件 -->
<script setup>
// 父传子
// 1. 给子组件，添加属性的方式传值
// 2. 在子组件，通过props接收

// 子传父
// 1. 在子组件内部，emit触发事件（编译器宏获取）
// 2. 在父组件，通过 @ 监听

// 局部组件(导入进来就能用)
import { ref } from 'vue'
import SonCom from '@/components/son-com.vue'

const money = ref(100)
const getMoney = () => {
  money.value += 10
}
const changeFn = (newMoney) => {
  money.value = newMoney
}
</script>


<template>
  <div>
    <h3>
      父组件 - {{ money }}
      <button @click="getMoney">挣钱</button>
    </h3>
    <!-- 给子组件，添加属性方式传值 -->
    <SonCom 
    @changeMoney="changeFn"
    car="宝马车" 
    :money="money">
  </SonCom>
  </div>
</template>

<script setup>
// 子组件
// 注意：由于写了 setup，所以无法直接配置 props 选项
// 所以：此处需要借助于"编译器宏"函数来接收子组件传递的数据
const props = defineProps({
  car: String,
  money: Number
})
const emit = defineEmits(['changeMoney'])
console.log(props.car)
console.log(props.money)

const buy = () => {
  // 需要 emit 触发事件
  emit('changeMoney', 5)
}
</script>


<template>
  <!-- 对于props传递过来的数据，模板中可以直接使用 -->
  <div class="son">
    我是子组件 - {{ car }} - {{ money }}
    <button @click="buy">花钱</button>
  </div>
</template>

<style scoped>
.son {
  border: 1px solid #000;
  padding: 30px;
}
</style>

十、组合式API - 模版引用

**1.**模板引用的概念

通过ref标识获取真实的dom对象或者组件实例对象

**2.**如何使用（以获取dom为例 组件同理）

（1）调用ref函数生成一个ref对象

（2）通过ref标识绑定ref对象到标签

**3.**defineExpose()

默认情况下在<script setup> 语法糖下组件内部的属性和方法是不开放给父组件访问的

可以通过defineExpose编译宏指定哪些属性和方法允许访问

**4.**总结

<script setup>
import TestCom from '@/components/test-com.vue'
import { onMounted, ref } from 'vue'

// 模板引用(可以获取dom，也可以获取组件)
// 1. 调用ref函数，生成一个ref对象
// 2. 通过ref标识，进行绑定
// 3.通过ref对象.value即可访问到绑定的元素（必须渲染完成后，才能拿到）
const inp = ref(null)

// 生命周期钩子 onMounted
onMounted(() => {
  // console.log(inp.value)
  // inp.value.focus()
})

const clickFn = () => {
  inp.value.focus()
}

// ------------------------------
const testRef = ref(null)
const getCom = () => {
  console.log(testRef.value.count)
  testRef.value.sayHi()
}
</script>


<template>
  <div>
    <input ref="inp" type="text">
    <button @click="clickFn">点击让输入框聚焦</button>
  </div>
  <TestCom ref="testRef"></TestCom>
  <button @click="getCom">获取组件</button>
</template>

十一、组合式API - provide和inject

**1.**作用和场景

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

**2.**跨层传递普通数据

（1）顶层组件通过provide函数提供数据

（2）底层组件通过inject函数获取数据

**3.**跨层传递响应式数据

在调用provide函数时，第二个参数设置为ref对象

（1）顶层组件

（2）底层组件

**4.**跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据

（1）顶层组件

（2）底层组件

**5.**需求解决思考

**6.**总结

<script setup>
import CenterCom from '@/components/center-com.vue'
import { provide } from 'vue'

// 1. 跨层传递普通数据
provide('theme-color', 'blue')
// 2. 跨层传递响应式数据
const count = ref(100)
provide('count', count)

setTimeout(() => {
  count.value = 500
}, 2000)

// 3. 跨层传递函数 => 给子孙后代传递可以修改数据的方法
provide('changeCount', (newCount) => {
  count.value = newCount
})
</script>


<template>
  <div>
    <h1>我是顶层组件</h1>
    <CenterCom></CenterCom>
  </div>
</template>

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

const themColor = inject('theme-color')
const count = inject('count')
const changeCount = inject('changeCount')
const clickFn = () => {
  changeCount(1000)
}
</script>


<template>
  <div>
    <h1>我是底层组件 - {{ themColor }} - {{ count }}</h1>
    <button @click="clickFn">更新count</button>
  </div>
</template>

十二、Vue3.3新特性-defineOptions

十三、Vue3.3新特性-defineModel

Vue3 中的 v-model 和 defineModel

<script setup>
import MyInput from '@/components/my-input.vue'
import { ref } from 'vue'
const txt = ('123456')
</script>


<template>
  <div>
    <MyInput v-model="txt"></MyInput>
    {{ txt }}
  </div>
</template>