【Vue3】Vue3简述

创建 Vue3 工程

① 使用 vue-cli 创建

1. vue -V / vue --version 查看 @vue/cli 版本，确保在 4.5.0 以上
2. npm i -g @vue/cli 安装最新的 @vue/cli
3. vue create vue_test 创建项目
4. cd vue_test 进入工程目录
5. npm run serve 启动项目

② 使用 vite 创建

• vite - 新一代的前端构建工具
  • 开发环境中，无需打包操作，可快速冷启动
  • 轻量快速的热重载 (HMR)
  • 真正的按需编译，不再等整个应用编译完成

1. npm init vite-app <project-name> 创建工程
2. cd <project-name> 进入工程目录
3. npm i 安装依赖
4. npm run dev 运行

Vue3 的改进

Composition API

• 选项式 API (Options API) 中，新增 / 修改一个需求，需要分别在 data、methods、computed 里修改
• 组合式 API (Composition API) 可以让相关功能的代码更有序的组织在一起

1. setup 配置
2. ref & reactive
3. watch & watchEffect
4. provide & inject
5. …

源码升级

1. 重写虚拟 DOM 的实现和 Tree-Shaking
2. 使用 Proxy 代替 defineProperty 实现响应式

Vue2 通过 es5 的 Object.defineProperty 实现双向数据绑定。根据 key 值读取 / 修改 value。但必须先知道想要拦截的 key 是什么，所以 vue2 无法监听对象的属性，比如属性的添加、删除 & 数组元素的修改、长度的变更，vue2 的解决方法是使用 Vue.set(object, propertyName, value) 等方法向嵌套对象添加响应式

Vue3 使用了 ES6 的原生 proxy 替代 Object.defineProperty。proxy 可以理解成，在对象之前设一层 “拦截”，外界对该对象的访问，都必须先通过这层拦截。因此提供了一种机制，可以对外界的访问进行操作。proxy 可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持

不同的生命周期钩子

1. beforeCreate → setup()
2. created → setup()
3. beforeMount → onBeforeMount
4. mounted → onMounted
5. beforeUpdate → onBeforeUpdate
6. updated → onUpdated
7. beforeDestroy → onBeforeUnmount
8. destroyed → onUnmounted
9. errorCaptured → onErrorCaptured

如果要在页面中使用生命周期函数，vue2 的操作是直接在页面中写入生命周期，而 vue3 是需要去引用的，这也是 Vue3 能将代码压缩到更低的原因

其他改变

1. Vue3 可以有多个根节点
2. data 选项应始终被声明为一个函数
3. 项目的默认目录结构不同
   vue3 移除了配置文件目录 config、build 文件夹；static 文件夹 → public 文件夹；
   在 src 文件夹中，新增了 views 文件夹 - 用于分类视图组件和公共组件
4. 移除 keyCode 支持作为 v-on 的修饰符，同时不再支持 config.keyCodes
5. 移除过滤器 filter
6. 移除 v-on.native 修饰符（自定义事件）

<!-- 父组件中 -->
<my-component v-on:close="fun1" v-on:click="fun1"></my-component>

<!-- 子组件中 -->
<script>
	export default {
        emits: ["close"]; // 声明 [自定义事件]； 就是说，默认是 [原生事件]
    }
</script>

CSS 方法

① v-bind(变量名)

<template>
    <p class="list">APP 组件</p>
    <button @click="change">修改</button>
</template>

<script>
import { ref } from "vue";
export default {
    name: "App",
    setup() {
        let color = ref("pink");
        function change() {
            color.value = "skyblue";
        }
        return { color, change };
    },
};
</script>

<style>
.list {
    /* 使用 v-bind 方法 */
    background: v-bind(color);
}
</style>

② CSS选择器 /deep/ (子级CSS选择器)

• 如果使用了插件，那么在组件中无法直接设置插件的样式，此时我们就可以使用深度选择器 /deep/

.father /deep/ (.son) {
    background: pink;
}

③ :global(CSS选择器)

• 用于设置全局样式，下例的 redFont 可以作用于所有组件中

:global(.redFont) {
    color: brown;
}