qq_53061847的博客

目录useCounteruseTitleuseScrollPosition前面我们已经学习了等等Composition API，那下面将通过一个Composition API的综合练习来巩固一下组合API的使用以及代码逻辑的封装（即Hook函数的封装）。其中该综合练习包含以下功能：计数器案例的实现。修改网页的标题。完成一个监听界面滚动位置。在使用Composition API之前，我们先看看用Options API是如何实现该功能...

在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理如何使用computed呢？计算属性两种用法给computed传入函数，返回值就是计算属性的值给computed传入对象，get获取计算属性的值，set监听计算属性改变。这种写法适用于需要的情况 Watch侦听数据的变化在前面的Options API中，我们可以通过watch选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。.........

如果想为在setup中定义的数据提供响应式的特性，那么我们可以使用reactive的函数： 那么这是什么原因呢？为什么就可以变成响应式的呢？ reactive API对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型： 这个时候Vue3给我们提供了另外一个API：ref API 这里有两个注意事项： 模板中的解包是浅层的解包，如果我们的代码是下面的方式：如果我们将ref放到一个reactive的属性当中，那么在模板中使用时，它会自动解包： 我们通过reactive或者ref可以获取到一

Composition API是Vue的下一个主要版本中最常用的讨论和特色语法。这是一种全新的逻辑重用和代码组织方法·当前，我们使用所谓的Options API构建组件。为了向Vue组件添加逻辑，我们填充（选项）属性，例如数据，方法，计算的等。这种方法的最大缺点是，这本身并不是有效的JavaScript代码。您需要确切了解模板中可以访问哪些属性，以及此关键字的行为。在后台，Vue编译器需要将此属性转换为工作代码。因此，我们无法从自动建议或类型检查中受益。Composition API的目的是通过将当前可用组

事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了： 但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的；官方解释： webp..

为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种： 这个时候，打包会报错要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader件夹中； 有时候我们处理后的文件名称按照一定的规则进行显示：这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容：我们这里介绍几个最常用的placeholder：[ext]： 处理文件的扩展名；[name]：处理文件的名称；[hash

Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：上面表达的含义翻译过来就是：前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：我们可以借助于一个插件来帮助我们完成，这个插件就是 CleanWebpackPlugin；另外还有一个不太规范的地方：对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin；我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件：该文件中也自动添加了我们打包的bund

前面我们是将所有的逻辑放到一个App.vue中：在之前的案例中，我们只是创建了一个组件App；如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；再将这些组件组合嵌套在一起，最终形成我们的应用程序；我们来分析一下下面代码的嵌套逻辑，在真实开发中，我们会有更多的内容和代码逻辑，对于扩展性和可维护性来说都是非常差的。所以，在真实的开发中，我们会对组件进行拆分，拆分成一个个功能的小组件。 我们可以按照如下的方式

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。全称是Vue.js或者Vuejs；什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；......