🌜本 篇 文 章 目 录 \textcolor{green}{本篇文章目录}本篇文章目录 🌛
🐵 新 构 建 工 具 V i t e \textcolor{blue}{新构建工具Vite}新构建工具Vite
🐵 C o m p o s i t i o n A P I 火 爆 来 袭 \textcolor{blue}{Composition API火爆来袭}CompositionAPI火爆来袭
🐵 C o m p o s i t i o n A P I 的 基 本 使 用 \textcolor{blue}{Composition API的基本使用}CompositionAPI的基本使用
🐵 计 算 属 性 的 使 用 \textcolor{blue}{计算属性的使用}计算属性的使用
🐵 事 件 处 理 \textcolor{blue}{事件处理}事件处理
🐵 侦 听 器 \textcolor{blue}{侦听器}侦听器
🐵 引 用 对 象 ： 单 个 原 始 值 响 应 化 \textcolor{blue}{引用对象：单个原始值响应化}引用对象：单个原始值响应化
🐵 体 验 逻 辑 组 合 \textcolor{blue}{体验逻辑组合}体验逻辑组合
vite
如今Vue3出现后，搭建Vue项目的方式有三种，除了可以通过 vue-cli 和 webpack 搭建脚手架外 官方还提供了一种新的脚手架搭建工具 vite，前面两种方式我们并不陌生，我们重点来看一下Vite
Vite 是 Vue 作者开发的一款意图取代 webpack 的工具，实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间
使用vite快速创建一款Vue3项目
使用vite创建vue3的步骤
npm install -g create-vite-app
create-vite-app vue3-demo
cd vue3-demo
npm install
创建目录如下
还是老样子我们看一下项目中的package.json
确实我们的项目中的vue版本是3，并且我们的运行以及打包都是依赖Vite，现在我们npm run dev看一下
就一个字 贼快！！！！！ 下面我们看一下main.js文件
我们就发现了陌生而又熟悉的地方：
Vue3是通过createApp创建vue实例的而不是new
Vue2中的所有内容都是挂载到new出来的vue构造函数（跟实例）上面的
现在vue3都是挂再到app上面
关于Vite的相关内容我们暂时就介绍这么多，更多的内容大家可以在网上找到更多的资料
Composition API火爆来袭
Composition API字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的。是Vue的一大亮点，和Vue2的区别我们下面揭晓
下面两张图让您直白的看出差距
在vue2中使用的统称为选项api（optionApi） 比如我们需要定义数据需要我们在data选项去定义，如果我们定义方法我们就需要在methods的选项下
Vue2所运用的option api的缺点：例如我们抽离一个很简单的组件 组建功能就是一个累加的功能，而vue抽离出去后的代码是分散的 我们需要在data中去定义一个num 然后我们需要在methods中去创建一个add方法，功能代码比较分散，这仅仅是一个小功能组件，如果是更复杂的逻辑呢？
Vue3中运用的是compostion Api运用的是一个功能就是一块代码，阅读性可维护性会更高些
Composition API的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../dist/vue.global.js"></script> </head> <body> <div id="app"> <h1>Composition API</h1> <div>count: {{ state.count }}</div> </div> <script> const { createApp, reactive } = Vue; // 声明组件 const App = { // setup是一个新的组件选项，它是组件内使用Composition API的入口 // 调用时刻是初始化属性确定后，beforeCreate之前 setup() { // 响应化：接收一个对象，返回一个响应式的代理对象 const state = reactive({ count: 0 }) // 返回对象将和渲染函数上下文合并 return { state } } } createApp(App).mount('#app') </script> </body> </html>
计算属性的使用
<div>doubleCount: {{doubleCount}}</div>
const { computed } = Vue; const App = { setup () { const state = reactive({ count: 0, // computed()返回一个不可变的响应式引用对象 // 它封装了getter的返回值 doubleCount: computed(() => state.count * 2) }) } }
事件处理
<div @click="add">count: {{ state.count }}</div>
const App = { setup () { // setup中声明一个add函数 function add () { state.count++ } // 传入渲染函数上下文 return { state, add } } }
侦听器
const { watch } = Vue; const App = { setup () { // state.count变化cb会执行 // 常用方式还有watch(()=>state.count, cb) watch(() => { console.log('count变了:' + state.count); }) } }
引用对象：单个原始值响应化
<div>counter: {{ counter }}</div>
const { ref } = Vue; const App = { setup () { // 返回响应式的Ref对象 const counter = ref(1) setTimeout(() => { // 要修改对象的value counter.value++ }, 1000); // 添加counter return { state, add, counter } } }
体验逻辑组合
const { createApp, reactive, onMounted, onUnmounted, toRefs } = Vue; // 鼠标位置侦听 function useMouse () { // 数据响应化 const state = reactive({ x: 0, y: 0 }) const update = e => { state.x = e.pageX state.y = e.pageY } onMounted(() => { window.addEventListener('mousemove', update) }) onUnmounted(() => { window.removeEventListener('mousemove', update) }) // 转换所有key为响应式数据 return toRefs(state) } // 事件监测 function useTime () { const state = reactive({ time: new Date() }) onMounted(() => { setInterval(() => { state.time = new Date() }, 1000) }) return toRefs(state) } // 逻辑组合 const MyComp = { template: ` <div>x: {{ x }} y: {{ y }}</div> <p>time: {{time}}</p> `, setup () { // 使用鼠标逻辑 const { x, y } = useMouse() // 使用时间逻辑 const { time } = useTime() // 返回使用 return { x, y, time } } } createApp().mount(MyComp, '#app')
想了解更多关注我，持续推送
✨原 创 不 易 ， 还 希 望 各 位 大 佬 支 持 一 下 \textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下
👍 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！ \textcolor{green}{点赞，你的认可是我创作的动力！}点赞，你的认可是我创作的动力！
⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！ \textcolor{green}{收藏，你的青睐是我努力的方向！}收藏，你的青睐是我努力的方向！
✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！ \textcolor{green}{评论，你的意见是我进步的财富！}评论，你的意见是我进步的财富！
