简介：认识Vue3和项目搭建

  • Vue3优点
  • 更小的打包体积和内存
  • 页面第一次的渲染速度和更新速度更快
  • 更好的支持 TypeScript
  • 新增了 Composition API 和内置组件
  • 搭建Vue3项目
  • vue-cli创建
  • 保持跟课程脚手架版本一致4.5.17，防止引用插件出现兼容问题
npm install -g @vue/cli@4.5.17
  • 查看版本，不一致时重新安装
vue -V //查看版本
全局卸载重装
npm uninstall -g vue-cli
npm install -g @vue/cli@4.5.17
  • 创建项目
vue create vue_project
  • 进入项目目录启动
npm run serve

1：vite 创建的项目速度快 但是默认的配置过于精简

项目工程文件介绍与Devtools安装

  • 项目文件
  • 入口文件 main.js
  • 使用 createApp 解析模板，更加小巧
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
  • 组件 <template> 标签里可以插入多个根标签
  • Devtools 安装
  • 正式版的 Devtools 在Vue3项目中不生效

详解常用Composition API

简介：走进Vue3的世界—setup

  • setup
  • setup 函数是Vue3新的配置项
  • 是使用组合API的前提，数据、方法都要放到setup 函数里声明
  • 写法
setup() {
const name = "张三";
const age = 18;
function sayHello() {
alert("你好,我是${name},今年${age}岁了");
}
return {
name,
age,
sayHello,
};
},
实现数据的响应式—ref函数

简介：实现数据的响应式—ref函数

  • 定义
  • 定义一个响应式的数据
  • 基本类型数据
  • 引入 ref 函数
import { ref } from "vue";
  • 创建一个包含响应式数据的引用对象（ ref 对象）
let name = ref("张三");
let age = ref(18);
  • 操作数据
function changePerson() {
name.value = "李四";
age.value = "19";
}
  • 对象类型数据
  • 创建一个包含响应式数据的引用对象（ ref 对象）
let obj = ref({
xd: "课堂",
course: "vue3",
});
  • 操作数据
function changeCourse() {
obj.value.course = "react";
}
  • 注意
  • 可以处理基本类型数据、数组或者对象类型的数据
  • 基本类型数据的响应式是通过 Object.defineProperty() 实现
  • 对象类型数据的响应式是通过 ES6 中的 Proxy 实现
实现数据的响应式—reactive函数

简介：实现数据的响应式—reactive函数

  • 定义
  • 定义一个对象类型的响应式数据（不能处理基本类型数据）
  • 写法
  • 对象
// 定义
let obj = reactive({
xd: "课堂",
course: "vue3",
});
// 修改
obj.course = "node";
  • 数组
// 定义
let list = reactive(["吃饭", "睡觉", "敲代码"]);
// 修改
list[3] = "打游戏"
  • reactive 和 ref 不同点
  • 处理数据类型不同： ref 可以处理基本类型和对象（数组）类型数据，reactive 只能处理对象（数组）类型数据
  • 实现原理不同：ref 处理基本类型数据通过 Object.defineProperty() 实现，reactive 通过 Proxy 实现
  • 操作不同：ref 操作数据需要加 .value
  • 组件数据多时更加趋向使用 reactive
剖析setup函数的执行时机和两个参数

简介：详解setup函数的两个参数

  • 执行时机
  • 在生命周期函数 beforeCreate 之前执行一次，而且 setup 函数没有 this
  • 两个参数
  • props
  • 第一个参数接收父组件的值，是一个对象
export default {
props: ["mess"],   //需要props声明才能在setup收到参数
setup(props) {
console.log(props.mess);
},
};
  • context
  • 上下文对象
  • 触发自定义事件
export default {
emits: ["xd"], //需要emits声明才能在setup中使用
setup(props, context) {
function clickMe() {
context.emit("xd", "子组件的值");
}
return {
clickMe,
};
},
};
掌握setup中的计算属性—computed函数

简介：详解computed函数

  • 定义
  • 通过已有的属性计算而来，跟vue2.x中的功能原理一样，使用方式有区别
  • 使用
  • 计算 ref 定义的响应式数据
const fullName = computed({
get() {
return firstName.value + "-" + lastName.value;
},
set(value) {
const arr = value.split("-");
firstName.value = arr[0];
lastName.value = arr[1];
},
});
  • 计算 setup定义的响应式数据
person.fullName = computed({
get() {
return person.firstName + "-" + person.lastName;
},
set(value) {
const arr = value.split("-");
person.firstName = arr[0];
person.lastName = arr[1];
},
});
掌握setup中的监视属性—watch函数上

简介：详解watch函数

  • 定义
  • 监听值的变化，执行相关的操作，跟vue2.x中的配置一样
  • 监听 ref 定义的数据
  • 基本类型
// 监听一个ref定义的数据
watch(num, (newValue, oldValue) => {
console.log("num增加了", newValue, oldValue);
},{ immediate: true, deep: true });
// 监听多个ref定义的数据
watch([num, num1], (newValue, oldValue) => {
console.log("num增加了", newValue, oldValue);
});
掌握setup中的监视属性—watch函数下

简介：详解watch函数

  • 监听 reactive 定义的数据
  • 使用
  • 监听对象类型
watch(numObj, (newValue, oldValue) => {
console.log("numObj变化了", newValue, oldValue);
});
  • 监听对象中的一个基本类型属性
watch(
() => numObj.a,
(newValue, oldValue) => {
console.log("numObj变化了", newValue, oldValue);
}
);
  • 监听对象中的一些基本类型属性
watch([() => numObj.a, () => numObj.b], (newValue, oldValue) => {
console.log("numObj变化了", newValue, oldValue);
});
  • 监听对象中的对象类型属性
watch(
numObj.c,
(newValue, oldValue) => {
console.log("numObj.c变化了", newValue, oldValue);
}
);
  • 总结
  • 实现监听生效
  • ref 定义的数据
  • 基本类型数据作为监听值
  • 对象作为监听值，需要加 .value（用的少）
  • reactive 定义的数据
  • 对象作为监听值
  • 属性作为监听值，需要放在回调函数中
认识setup中的watchEffect函数

简介：详解watchEffect函数

  • 定义
  • 在监听的回调函数中使用了属性，则监听该属性，不用在参数上指明监听哪个属性
  • 写法
watchEffect(() => {
let xd = numa.value;
let xd1 = numb.value;
console.log("watchEffect函数执行了");
});
  • 与 watch 的区别
  • 属性监听区别：
  • watch 手动添加定向的监听属性
  • watchEffect 自动监听使用到的属性
  • 初始化执行：
  • watchEffect 会初始化执行一次
  • 建议开发中使用 watch 监听，逻辑简单、依赖属性少的场景可以使用 watchEffect

掌握生命周期函数和数据处理

掌握Vue3中的生命周期函数

简介：详解Vue3中的生命周期函数

  • 创建
创建前、后：beforeCreate、created
创建：setup
  • 挂载
挂载前、后：beforeMount、mounted
挂载：onBeforeMount、onMounted
  • 更新
更新前、后（beforeUpdate、updated）
更新：onBeforeUpdate、onUpdated
  • 卸载
销毁前、后：beforeDestroy、destroyed
卸载：onBeforeUnmount、onUnmounted
掌握Vue3中的toRef和toRefs函数

简介：详解Vue3中的toRef和toRefs

  • toRef
  • 定义
  • 创建一个 ref 对象，其 value 值指向另一个对象中指定的属性
  • 写法
const name = toRef(person, "name");
  • 作用
  • 将某个响应式对象的某一个属性提供给外部使用
  • toRefs
  • 定义
  • 批量创建多个 ref 对象，其 value 值指向另一个对象中指定的属性
  • 写法
setup() {
let person = reactive({
name: "张三",
age: 19,
});
return {
...toRefs(person),
};
},
  • 作用
  • 将某个响应式对象的全部属性提供给外部使用
多层嵌套的组价间的通讯—provide和inject

简介：详解provide和inject

  • 作用
  • 实现祖孙组件间的传值
  • 写法
  • 祖组件使用 provide 提供数据
let name = ref("课堂");
provide("xd", name);
  • 后代组件使用 inject 使用数据
const message = inject("xd");