创建 Vue3 工程
① 使用 vue-cli 创建
vue -V
/vue --version
查看 @vue/cli 版本,确保在 4.5.0 以上npm i -g @vue/cli
安装最新的 @vue/clivue create vue_test
创建项目cd vue_test
进入工程目录npm run serve
启动项目
② 使用 vite 创建
- vite - 新一代的前端构建工具
- 开发环境中,无需打包操作,可快速冷启动
- 轻量快速的热重载 (HMR)
- 真正的按需编译,不再等整个应用编译完成
npm init vite-app <project-name>
创建工程cd <project-name>
进入工程目录npm i
安装依赖npm run dev
运行
Vue3 的改进
Composition API
- 选项式 API (Options API) 中,新增 / 修改一个需求,需要分别在 data、methods、computed 里修改
- 组合式 API (Composition API) 可以让相关功能的代码更有序的组织在一起
- setup 配置
- ref & reactive
- watch & watchEffect
- provide & inject
- …
源码升级
- 重写虚拟 DOM 的实现和 Tree-Shaking
- 使用 Proxy 代替 defineProperty 实现响应式
Vue2 通过 es5 的 Object.defineProperty
实现双向数据绑定。根据 key
值读取 / 修改 value
。但必须先知道想要拦截的 key
是什么,所以 vue2 无法监听对象的属性,比如属性的添加、删除 & 数组元素的修改、长度的变更,vue2 的解决方法是使用 Vue.set(object, propertyName, value)
等方法向嵌套对象添加响应式
Vue3 使用了 ES6 的原生 proxy
替代 Object.defineProperty
。proxy
可以理解成,在对象之前设一层 “拦截”,外界对该对象的访问,都必须先通过这层拦截。因此提供了一种机制,可以对外界的访问进行操作。proxy
可以直接监听对象而非属性,并返回一个新对象,具有更好的响应式支持
不同的生命周期钩子
beforeCreate
→setup()
created
→setup()
beforeMount
→onBeforeMount
mounted
→onMounted
beforeUpdate
→onBeforeUpdate
updated
→onUpdated
beforeDestroy
→onBeforeUnmount
destroyed
→onUnmounted
errorCaptured
→onErrorCaptured
如果要在页面中使用生命周期函数,vue2 的操作是直接在页面中写入生命周期,而 vue3 是需要去引用的,这也是 Vue3 能将代码压缩到更低的原因
其他改变
- Vue3 可以有多个根节点
- data 选项应始终被声明为一个函数
- 项目的默认目录结构不同
vue3 移除了配置文件目录 config、build 文件夹;static 文件夹 → public 文件夹;
在 src 文件夹中,新增了 views 文件夹 - 用于分类视图组件和公共组件 - 移除 keyCode 支持作为 v-on 的修饰符,同时不再支持
config.keyCodes
- 移除过滤器 filter
- 移除
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;
}