Vue

为什么使用 Pinia? https://pinia.vuejs.org/zh/ Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能： ...

Vue2-VueX 1.vuex介绍 目标 什么是vuex 为什么学习vuex 通信方案 组件关系 数据通信 父子关系 父传子：props ； 子传父：$emit 非父子关系 vuex (一种组件通信方案) vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理数据，以相应的规则保证状态以一种可预测的方式发生变化 ...

VueCLI https://cli.vuejs.org/zh/ 什么是Vue脚手架？ 我们前面学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成 所有的webpack配置，这样显示开发的效率会大大的降低； 所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架； 脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架； 我们可以通过CLI选择项目的配置和创建出我们的项目； Vue CLI已经内置了webpack相关的配置，我们不需要从零来配置； Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： ...

Vue 过渡与动画初体验 认识动画 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验： React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group； Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果； 我们来看一个案例： Hello World的显示和隐藏； 通过下面的代码实现，是不会有任何动画效果的； <template> <div> <button @click="toggle">显示/隐藏</button> <h2 v-if="show">App组件</h2> </div> </template> <script> export default { data() { return { show: true } }, methods: { toggle() { this.show = !this.show; } } } </script> 没有动画的情况下，整个内容的显示和隐藏会非常的生硬： 如果我们希望给单元素或者组件实现过渡动画，可以使用 transition内置组件来完成动画； Vue的 transition 动画 https://cn.vuejs.org/guide/built-ins/transition.html#transition ...

认识组件化开发 认识组件化开发 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆解。 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑 全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展； 但如果，我们讲一个页面拆分成一个个 小的功能块，每个功能块完成属于自己 这部分独立的功能，那么之后整个页面 的管理和维护就变得非常容易了； 如果我们将一个个功能块拆分后，就可 以像搭建积木一下来搭建我们的项目； 现在可以说整个的大前端开发都是组件化的天下，无论从三大框架（Vue、React、Angular），还是跨平台方案 的Flutter，甚至是移动端都在转向组件化开发，包括小程序的开发也是采用组件化开发的思想 所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。 我们需要通过组件化的思想来思考整个应用程序： 我们将一个完整的页面分成很多个组件； 每个组件都用于实现页面的一个功能块； 而每一个组件又可以进行细分； 而组件本身又可以在多个地方进行复用； Vue的组件化 vue 项目起始文件 createApp 函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根 组件； 组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用； 任何的应用都会被抽象成一颗组件树； ...

邂逅 Vue 认识 Vue 什么是 Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 全程是Vue.js或者Vuejs； 什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个 项目； Vue3带来的变化 源码通过monorepo的形式来管理源代码： Mono：单个 Repo：repository仓库 主要是将许多项目的代码存储在同一个 repository 中； 这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理； 而且模块划分的更加清晰，可维护性、可扩展性更强； 源码使用TypeScript来进行重写： 在Vue2.x的时候，Vue使用 Flow 来进行类型检测； 在Vue3.x的时候，Vue的源码全部使用 TypeScript 来进行重构，并且 Vue 本身对 TypeScript 支持也更好了； 性能方面 使用Proxy进行数据劫持 在 Vue2.x 的时候，Vue2 是使用 Object.defineProperty 来劫持数据的 getter 和 setter 方法的； 这种方式一致存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的； 所以在 Vue2.x 的时候，不得不提供一些特殊的API，比如 $set 或 $delete ，事实上都是一些 hack 方法，也增加了 开发者学习新的API的成本； 而在 Vue3.x 开始，Vue 使用 Proxy 来实现数据的劫持 删除了一些不必要的API： 移除了实例上的 $on , $off 和 $once； 移除了一些特性：如filter、内联模板等； 包括编译方面的优化： 生成Block Tree、Slot编译优化、diff算法优化； 新的API 由Options API 到 Composition API： 在 Vue2.x 的时候，我们会通过 Options API 来描述组件对象； Options API 包括data、props、methods、computed、生命周期等等这些选项； 存在比较大的问题是多个逻辑可能是在不同的地方： 比如created中会使用某一个method来修改data的数据，代码的内聚性非常差； Composition API可以将 相关联的代码 放到同一处 进行处理，而不需要在多个Options之间寻找； Hooks函数增加代码的复用性： 在Vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑；但是有一个很大的缺陷就是 mixins也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题； 在Vue3.x中，我们可以通过Hook函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的； 如何使用 Vue 方式一：在页面中通过CDN的方式来引入； 方式二：下载Vue的JavaScript文件，并且自己手动引入； 方式三：通过npm包管理工具安装使用它； 方式四：直接通过Vue CLI创建项目，并且使用它； CDN 引入 <script src="https://unpkg.com/vue@next"></script> 下载和引入 下载Vue的源码，可以直接打开CDN的链接： 打开链接，复制其中所有的代码； 创建一个新的文件，比如vue.js，将代码复制到其中； <script src="../js/vue.js"></script> 声明式编程和命令式编程 原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式命令式编程和声明式编程 命令式编程关注的是“ how to do”,声明式编程关注的是" what to do",由框架(机器)完成"how"的过程 MVVM模型 MVC和MVVM都是一种软件的体系结构 MVC是 Model-View-Controller的简称,是在前期被使用非常框架的架构模式,比如iS、前端 MVVM是 Model-View- ViewMode的简称,是目前非常流行的架构模式 通常情况下,我们也经常称vue是一个MVVM的框架 vue官方其实有说明,vue虽然并没有完全遵守MVVM的模型,但是整个设计是受到它的启发的 ...