简介:认识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");
-