Vue

邂逅 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的模型,但是整个设计是受到它的启发的 ...