01_邂逅vue3开发
邂逅Vue3和Vue3初体验
认识Vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
- 全程是Vue.js或者Vuejs；
- 什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；
目前Vue在前端处于什么地位？
目前前端最流行的是三大框架：Vue、React、Angular。
Vue对前端工程师的重要性
目前需要学习Vue3吗？
在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。
- 它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计。
- 在vue3刚刚发布时，很多人也是跃跃欲试，想要尝试vue3的各种新特性。
- 但是事实上在刚刚发布的时候我们使用vue3来写demo练习是没有问题的，真正在实际业务项目中使用vue3还需要一个相对的过程；
- 包括vue3的进一步稳定、包括社区更多vue3相关的插件、组件库的支持和完善。
那么现在是否是学习vue3的时间呢？
- 答案是肯定的
- 首先vue3在经过一系列的更新和维护后，已经是趋于稳定，并且在之前尤雨溪也宣布在今年（2021年）第二季度会 将vue3作为Vue CLI的默认版本了。
- 目前社区也经过一定时间的沉淀，更加的完善了，包括AntDesignVue、Element-Plus都提供了对Vue3的支持，所以很多公司目前新的项目都已经在使用Vue3来进行开发了。
- 并且在面试的时候，几乎都会问到各种各样Vue3、Vite2工具相关的问题。
Vue3带来的变化（源码-新的API）
源码通过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或set或set或delete，事实上都是一些hack方法，也增加了开发者学习新的API的成本；
- 而在Vue3.x开始，Vue使用Proxy来实现数据的劫持，这个API的用法和相关的原理我也会在后续讲到；
删除了一些不必要的API：
- 移除了实例上的$on, $off 和 $once；
- 移除了一些特性：如filter、内联模板等；
包括编译方面的优化：
- 生成Block Tree、Slot编译优化、diff算法优化；
由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呢？
Vue的本质，就是一个JavaScript的库：
- 刚开始我们不需要把它想象的非常复杂；
- 我们就把它理解成一个已经帮助我们封装好的库；
- 在项目中可以引入并且使用它即可。
那么安装和使用Vue这个JavaScript库有哪些方式呢？
- 方式一：在页面中通过CDN的方式来引入；
- 方式二：下载Vue的JavaScript文件，并且自己手动引入；
- 方式三：通过npm包管理工具安装使用它（webpack再讲）；
- 方式四：直接通过Vue CLI创建项目，并且使用它；
方式一：CDN引入
什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩
写：CDN）
- 它是指通过 相互连接的网络系统，利用最靠近每个用户的服务器；
- 更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；
- 来提供高性能、可扩展性及低成本的网络内容传递给用户；
常用的CDN服务器可以大致分为两种：
- 自己的CDN服务器：需要购买自己的CDN服务器，目前阿里、腾讯、亚马逊、Google等都可以购买CDN服务器；
- 开源的CDN服务器：国际上使用比较多的是unpkg、 JSDelivr、cdnjs；
Hello Vue案例的实现：
方式二：下载和引入
下载Vue的源码，可以直接打开CDN的链接：
- 打开链接，复制其中所有的代码；
- 创建一个新的文件，比如vue.js，将代码复制到其中；
你好啊，Vue3，案例的实现：
计数器案例
如果我们希望实现一个计数器的案例：
- 点击+1，那么内容会显示数字+1；
- 点击-1，那么内容会显示数字-1；
我们可以选择很多种方式来实现：
- 在这里我们就对比原生和Vue的实现方式的不同。
计数器原生实现
计数器Vue实现
声明式和命令式
原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：
- 命令式编程和声明式编程；
- 命令式编程关注的是 “how to do”，声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；
在原生的实现过程中，我们是如何操作的呢？
- 我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；
- 这样的编写代码的过程，我们称之为命令式编程；
- 在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；
在Vue的实现过程中，我们是如何操作的呢？
- 我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；
- 这样的编写代码的过程，我们称之为是声明式编程；
- 目前Vue、React、Angular的编程模式，我们称之为声明式编程；
MVVM模型
MVC和MVVM都是一种软件的体系结构
- MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；
- MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；
通常情况下，我们也经常称Vue是一个MVVM的框架。
- Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。
template属性
在使用createApp的时候，我们传入了一个对象，接下来我们详细解析一下之前传入的属性分别代表什么含义。
template属性表示的是Vue需要帮助我们渲染的模板信息：
目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们挂载到的元素（比如id为app的div）的innerHTML；
模板中有一些奇怪的语法，比如 {{}}，比如 @click，这些都是模板特有的语法，我们会在后面讲到；
但是这个模板的写法有点过于别扭了，并且IDE很有可能没有任何提示，阻碍我们编程的效率。
Vue提供了两种方式：
- 方式一：使用script标签，并且标记它的类型为 x-template；
- 方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置id；
- template元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使用JavaScript实例化；
template写法
方式一：使用script标签
方式二：使用template
data属性:是传入一个函数，并且该函数需要返回一个对象：
- 在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；
- 在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；
data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
- 所以我们在template中通过 {{counter}} 访问counter，可以从对象中获取到数据；
- 所以我们修改counter的值时，template中的 {{counter}}也会发生改变
methods属性:是一个对象，通常我们会在这个对象中定义很多的方法：
- 这些方法可以被绑定到 template 模板中；
- 在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；
当然，这里还可以定义很多其他的属性，我们会在后续进行讲解：
- 比如props、computed、watch、emits、setup等等；
- 也包括很多的生命周期函数；
01_邂逅vue3开发相关推荐
- Vue3+Ts(coderwhy)超详细学习笔记（二）邂逅Vue3开发
本文修改记录 22/1/11 发布 22/3/20 新增与Vue2与Vue3对比备注 一. 认识Vue.js 1.1. 认识Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户 ...
- vue2 怎么用vite_Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来.但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验.还有一些童鞋已经开始又慌又抓狂了 -- "又要开始学新的写法了 ...
- 分享 6 个 Vue3 开发必备的 VSCode 插件
今天分享 6 个 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用. 如果有觉得有帮助,还请点赞
- 邂逅Flutter开发
邂逅Flutter开发 一.Flutter是什么? 1.1 Flutter 文档链接 二.Flutter的特点 2.1 美观: 2.2 快速: 2.3 高效: 2.4 开放: 三.平台独立开发 四.跨 ...
- 使用 Vue3 开发小程序
前言 9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,「One Piece」的代号也昭示了其开拓伟大航路的野心. Vue3 的新特性主要有 Composition ...
- Taro+vue3开发微信小程序容易遇到的小问题
最近在和团队做一个微信小程序的应用,我也是第一次接触用vue开发小程序,不可避免的遇到了很多问题,我对遇到的问题进行一些汇总,如果大家有遇到类似的问题,希望可以帮助到大家. 1.微信小程序的头部导航栏 ...
- Vue3开发教程（一、学习Vue前需要了解的内容)
前言 本文是笔者学习vue前端技术过程的总结,其中包括vue开发需要了解的相关技术如:node.ES6.TypeScript.vite.ElementUI.以vue作为主线来介绍相关技术,最后通过一个 ...
- 基于最新的MAUI混合VUE3开发Android应用（2022-11-01）
因为最近自己想着要整一个手机端应用来玩玩,先是使用了Uni-APP开发但是发现不怎么好使,开发了几天后浪费了大量时间结果在打包后操作HTML Document的时候没有这个属性,好吧或许是因为我没仔细 ...
- 从零开始使用 Webpack 搭建 Vue3 开发环境
从零开始使用 Webpack 搭建 Vue3 开发环境 前情提要 从零开始使用 Webpack 搭建 Vue 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init - ...
最新文章
- Spring、Spring Boot和TestNG测试指南 - @ActiveProfiles
- 2023年中国AI论文影响力超越美国？网友：长期看，数量不等于质量
- Buffer.isBuffer()详解
- STM32的IIC应用详解3
- Singleton Pattern（单例模式）
- kubernetes对象之deployment
- ARM汇编编程基础之一 —— 寄存器
- python 统计英文词频
- BufferedReader类
- 我误会atoi()函数了
- css transition transform animation例子讲解
- 深入浅出Flume之原理解析
- fseek(f,0,SEEK_SET);
- excel 根据两点经纬度计算距离
- 根据ISBN查询图书信息
- 跑马灯广告语的实现过程,并且自定义marquee,解决焦点抢占问题.
- 海明码的编码和校验方法
- 隐藏的BUG探讨——从“Y2K”问题到“2038”年问题
- 题目：在C语言中,表达式23|2^5的值是()
- IT培训班有用吗?IT培训包就业是真的吗?