Vue.js入门教程（八）

目录

Vue3

优点

Vue脚手架 Vue CLI 创建一个Vue3的项目

1：安装脚手架

2：创建一个项目

3：Vue初始项目文件

main.js

App.vue

Vue3的Composition API

setup 函数

setup 的参数

        参数：props

        参数：context

ref 函数

reactive 函数

ref 和 reactive 的区别

setup 的 computed 函数

setup 的 watch函数

setup 的 watchEffect 函数

 setup 的 toRef 函数

 setup 的 toRefs 函数

Vue3中的生命周期函数

多层嵌套组件之间的通讯

---

Vue3

优点

• 更小的打包体积和内存
• 更好的支持 TypeScript
• 页面第一次的渲染速度和更新速度更快
• 新增了 Composition API 和内置组件

Vue脚手架 Vue CLI 创建一个Vue3的项目

1：安装脚手架

npm install -g @vue/cli

Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

2：创建一个项目

vue create hello-vue3

报错：vue : 无法加载文件xxx 因为在此系统上禁止运行脚本

解决：以管理员身份运行VS Code，在终端输入 set-ExecutionPolicy RemoteSigned 即可。

使用 vue -V 查看 Vue CLI版本

vue -V

选择  Vue 3 

然后

cd hello-vue3

npm run serve

打开网页 http://localhost:8080。这样一个 Vue3 脚手架项目就创建完成了

3：Vue初始项目文件

• main.js

整个项目的入口文件

• App.vue

所有⼦组件的⽗组件

---

Vue3的Composition API

• setup 函数

• setup 函数是Vue3新的配置项
• 是使用组合API的前提，数据、方法都要放到 setup 函数里声明
• 在生命周期函数 beforeCreate 之前执行一次，而且 setup 函数没有 this

• setup 的参数

        参数：props

用于接收父组件的值

        参数：context

上下文对象，触发自定义事件

        父组件代码

        子组件代码

---

• ref 函数

实现数据的响应式        // setup定义的变量数据，如果想通过setup中定义的函数改变数据是没有作用的。这里就要用到 ref 函数改变数据

• 可以处理基本类型数据、数组或者对象类型的数据
• 基本类型数据的响应式是通过 Object.defineProperty() 实现
• 对象类型数据的响应式是通过 ES6 中的 Proxy 实现

---

• reactive 函数

定义一个对象类型的响应式数据（不能处理基本类型数据）

---

• ref 和 reactive 的区别

• 处理数据类型不同：ref 可以处理基本类型和对象（数组）类型数据， reactive 只能处理对象（数组）类型数据
• 实现原理不同：ref 处理基本类型数据通过 Object.defineProperty() 实现， reactive 通过Proxy 实现
• 操作不同： ref 操作数据需要加 .value

---

• setup 的 computed 函数

---

• setup 的 watch函数

监听对象

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 定义的数据
  • 对象作为监听值
  • 属性作为监听值，需要放在回调函数中
• 如果监听 reactive 定义的对象，则无法正确输出 oldValue ，且深度监听是强制开启的，无法关闭 （vue3配置）

---

• setup 的 watchEffect 函数

在监听的回调函数中使⽤了属性，则监听该属性，不⽤在参数上指明监听哪个属性

•  setup 的 toRef 函数

创建一个 ref 对象，其 value 值指向另一个对象中指定的属性        // 相当于起了个别名

•  setup 的 toRefs 函数

批量创建 ref 对象，其 value 值指向另一个对象        // 相当于批量起别名

---

Vue3中的生命周期函数

---

多层嵌套组件之间的通讯

• provide：祖组件使用此函数传递数据
• inject：后代组件使用此函数接收数据

// 上级组件代码

// 下级（多层下级都可以）组件代码