vue3学习记录一总纲

vue3 学习

2023-01-02 17:10:06 开始，长期更新中，记录自己的学习和成长
内容来自chatGpt

1.学习 Vue 3 一年的学习计划可以分为以下几个步骤:

1. 了解 Vue 3 的基本概念，包括 Vue 3 的架构、组件、模板、数据流、路由等。
2. 学习 Vue 3 的基本语法，包括如何创建 Vue 3 应用、如何使用组件、如何使用指令、如何使用过滤器等。
3. 学习 Vue 3 的高级特性，包括如何使用自定义指令、如何使用计算属性、如何使用侦听器、如何使用路由等。
4. 学习 Vue 3 与后端的交互，包括如何使用 axios 发送 HTTP 请求、如何使用 vue-resource 发送 HTTP 请求、如何使用 vue-socket.io 实现 WebSocket 通信等。
5. 学习 Vue 3 与其他前端技术的集成，包括如何使用 vue-router 实现路由、如何使用 vuex 实现状态管理、如何使用 vue-i18n 实现国际化等。
6. 学习 Vue 3 的实战应用，包括如何使用 Vue 3 构建单页应用、如何使用 Vue 3 构建服务端渲染应用、如何使用 Vue 3 构建混合移动应用等。

2.在学习 Vue 3 的过程中，可能会遇到以下难点:

1. 理解 Vue 3 的响应式原理和实现方式。
2. 掌握 Vue 3 的组件化开发方式，并能灵活地使用 Vue 3 组件之间的通信方式。
3. 理解 Vue 3 的路由原理和实现方式，并能熟练使用 vue-router 实现路由管理。
4. 掌握 Vue 3 的状态管理方式，并能熟练使用 vuex 管理应用的状态。
5. 理解 Vue 3 的国际化原理和实现方式，并能熟练使用 vue-i18n 实现国际化。
6. 了解 Vue 3 的服务端渲染原理和实现方式，并能熟练使用 Vue 3 实现服务端渲染。

在学习 Vue 3 的过程中，重点应放在理解 Vue 3 的基本原理和实现方式上，这样才能更好地应用 Vue 3 开发项目。同时，应多练习实战应用，这样才能更好地掌握 Vue 3 的使用方法。

一、响应式原理和实现方式

-Vue 3 中的响应式系统是通过使用 ECMAScript 的新特性，即 Proxy 对象来实现的。
-在 Vue 2 中，响应式系统是通过使用访问器属性（即 getter 和 setter）来实现的。
-在 Vue 3 中，当你声明一个响应式的对象时，Vue 会创建一个 Proxy 对象包装原始对象。
-这个 Proxy 对象会拦截对原始对象的访问，并在访问之前进行一些额外的操作，例如收集依赖和触发更新。举个例子，假设我们有一个响应式对象 data：

	const data = reactive({count: 0});

那么 Vue 就会创建一个 Proxy 对象来包装原始对象：

	const proxy = new Proxy(data, {// 拦截对 data 对象的访问get: function(target, key, receiver) {// 收集依赖track(target, key);return Reflect.get(target, key, receiver);},set: function(target, key, value, receiver) {// 触发更新trigger(target, key);return Reflect.set(target, key, value, receiver);}});

当你访问 proxy.count 时，实际上是在访问 data.count，但是因为有了 Proxy 对象的拦截，所以会先收集依赖，然后再返回值。
如果你修改了 proxy.count 的值，也会先触发更新，然后再设置新值。

1.简单的 Vue 3 响应式系统的实现代码示例

const toProxy = new WeakMap();
const toRaw = new WeakMap();function reactive(target) {// 如果 target 已经是一个代理对象，则直接返回if (toProxy.has(target)) {return toProxy.get(target);}// 创建一个代理对象const proxy = new Proxy(target, {get(target, key, receiver) {// 收集依赖track(target, key);return Reflect.get(target, key, receiver);},set(target, key, value, receiver) {// 触发更新trigger(target, key);return Reflect.set(target, key, value, receiver);}});// 保存映射关系toProxy.set(target, proxy);toRaw.set(proxy, target);return proxy;
}function track(target, key) {// 省略收集依赖的代码console.log(`track: ${key}`);
}function trigger(target, key) {// 省略触发更新的代码console.log(`trigger: ${key}`);
}const data = reactive({count: 0
});console.log(data.count); // track: count, 0
data.count++; // trigger: count

这段代码中，我们使用了 Proxy 对象来实现响应式系统的核心逻辑，即拦截对象的访问并收集依赖和触发更新。
在使用时，我们可以调用 reactive 函数将一个普通的对象转换为响应式对象，然后就可以像访问普通对象一样访问响应式对象了。
每当访问响应式对象的属性时，就会触发依赖。

a.WeakMap

WeakMap 是 JavaScript 中的一种特殊的 Map，它的特点是：它的键必须是对象。
它的键是弱引用，当没有其他变量引用该对象时，垃圾回收机制会自动回收。
WeakMap 和普通的 Map 相比，最大的区别就是 WeakMap 的键是弱引用，而普通的 Map 的键是强引用。
这意味着，如果您使用 WeakMap 存储一个对象，那么该对象就可能会被垃圾回收机制回收。在上面的代码中，我们使用了两个 WeakMap 对象来保存映射关系，
一个是 toProxy，用于保存原始对象和代理对象的映射关系；
另一个是 toRaw，用于保存代理对象和原始对象的映射关系。
这样做的好处是，当我们调用 reactive 函数时，
如果传入的对象已经是一个代理对象了，我们就可以直接返回该代理对象，避免重复包装。
这样做也有利于维护对象的响应式状态。

b.Reflect

Reflect 对象是 JavaScript 中的一个内置对象，提供了一组与 Object 对象一一对应的方法。这些方法可以用来操作对象的反射，例如获取对象的属性、判断对象是否具有某个属性等。在 ECMAScript 5 中，Object 对象的一些常用方法（如 getPrototypeOf、defineProperty 等）都是通过命令式的方式来实现的，例如：

	let obj = { a: 1 };let prototype = Object.getPrototypeOf(obj);

在 ECMAScript 6 中，Object 对象的这些方法都可以通过 Reflect 对象的静态方法来调用，例如：

	let obj = { a: 1 };let prototype = Reflect.getPrototypeOf(obj);

使用 Reflect 对象的优点是可以避免写 try-catch 代码块来捕获错误，因为 Reflect 对象的方法都是像函数一样抛出错误。例如，如果在使用 Object.defineProperty 方法时传入了无效的参数，就会抛出 TypeError 错误：

	try {Object.defineProperty({}, 'a', {get() {return 1;}});} catch (e) {console.error(e); // TypeError: Cannot convert undefined or null to object}

而如果使用 Reflect.defineProperty 方法，就会直接返回 false：

	console.log(Reflect.defineProperty({}, 'a', {get() {return 1;}})); // false

c.收集依赖

Effect 函数是 Vue 3 中用于收集依赖和触发更新的函数。它的原理是使用了 JavaScript 的自执行函数，在函数执行时通过调用观察者（Observer）的方法来触发更新。下面是一个简单的 Effect 函数的代码示例：

	import { effect } from 'vue';const state = reactive({count: 0});// 定义一个 Effect 函数const increase = effect(() => {state.count++;});// 触发更新increase();console.log(state.count); // 1

在上面的代码中，我们定义了一个名为 increase 的 Effect 函数，该函数用于增加响应式对象 state 的 count 属性。
当我们调用 increase 函数时，会自动触发更新，使得 state.count 的值加 1。
我们可以通过调用 effect 函数来定义 Effect 函数，并通过执行 Effect 函数来触发更新。

d.执行更新视图的操作

"track" 函数会在执行 "effect" 函数时被调用，用来收集依赖。"effect" 函数会在响应式数据发生变化时触发更新。"trigger" 函数会在响应式数据发生变化时被调用，用来触发更新。它会检查依赖列表中是否有与当前修改的属性相关的依赖，如果有，则触发这些依赖的更新。

" 函数会在执行 “effect” 函数时被调用，用来收集依赖。“effect” 函数会在响应式数据发生变化时触发更新。

"trigger" 函数会在响应式数据发生变化时被调用，用来触发更新。它会检查依赖列表中是否有与当前修改的属性相关的依赖，如果有，则触发这些依赖的更新。

思考：“track” 函数和"trigger" 函数的实现

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！