Vue进阶

能够实现项目的打包

能够说出开发移动App的几种方式

能够使用HBuliderX把移动端网站打包成移动App

能够说出defineProperty的作用

能够说出服务端渲染和客户端渲染的区别

理解Nuxt的作用

能够理解asyncData的作用

Day01

01-阶段说明和内容介绍

内容介绍

打包app

MVVM实现原理

Object.defineProperty()方法的使用

发布订阅模式

实现MVVM框架

SSR服务端渲染

阶段说明

本阶段MVVM和SSR部分的内容难度大、抽象、难理解

本阶段不要求掌握编码,但需要用自己的语言将内容进行描述

本阶段要求对Vue基本使用非常熟练

data->声明组件自己的简单的响应式的数据

computed->声明组件自己的复杂(数据b依赖了数据a,此时数据b是计算属性)的响应式的数据

props->声明值来源于外部(通常是父组件)的响应式的数据

watch->监听数据变化-在变化时要做的事儿是异步||开销大

异步:定时器/ajax/事件

开销大:循环||递归(自己玩自己)

语法 watch:

// 凡是可以使用Vue的实例this.出来的东西都可以watch监测变化

watch : {

msg(){}, this.msg

computedMsg(){}, this.computed

'$route'(){}, this.$route

'$store'(){} this.$store

}

1

2

3

4

5

6

7

****本阶段的内容MVVM部分在面试环节Vue部分属于重点项、必问点,常见的面试问题:

Vue 数据绑定的原理？

MVVM 数据绑定的原理？

Vue 双向数据绑定的原理？

Vue 数据响应式原理？

数据响应式原理？

数据驱动视图的原理?

02-移动App开发的几种方式

原生App

WebApp

HybridApp

分支:跨平台开发

其他类型(小程序/快应用等等)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hYDAAwc-1589879881943)(assets/Mobile-App-Development.png)]

03-移动App开发-NativeApp介绍和特点

定义:传统的原生App开发模式，有iOS和Android两大系统，需要各自语言开发各自App。

优点：性能和体验都是最好的

缺点：开发和发布成本高

应用技术：Swift，OC，Java

常识: 安卓/iOS/Web 基本都使用Mac进行开发

04-移动App开发-WebApp介绍和特点

M站演示

定义: 移动端的网站，常被称为H5应用，说白了就是特定运行在移动端浏览器上的网站应用。一般泛指 **SPA(Single Page Application)模式开发出的网站，与MPA（**Multi-page Application）对应。

优点：开发和发布成本最低

开发成本低,可以跨平台,调试方便，开发速度最快

web app一般只需要一个前端人员开发出一套代码,然后即可应用于各大主流浏览器(特殊情况可以代码进行下兼容),没有新的学习成本,而且可以直接在浏览器中调试

维护成本低

同上,如果代码合理,只需要一名前端就可以维护多个web app

更新最为快速

由于web app资源是直接部署在服务器端的,所以只需要替换服务器端的文件,用户访问是就已经更新了(当然需要解决一些缓存问题)

无需安装App,不会占用手机内存

通过浏览器即可访问,无需安装,用户就会比较愿意去用

缺点：性能和体验不能讲是最差的，但也受到浏览器处理能力的限制

性能低,用户体验差

由于是直接通过的浏览器访问,所以无法使用原生的API,操作体验不好

依赖于网络,页面访问速度慢,耗费流量

Web App每次访问都需要去服务端加载资源访问,所以必须依赖于网络,而且网速慢时访问速度很不理想,特别是在移动端,如果网站优化不好会无故消耗大量流量

功能受限,大量功能无法实现

只能使用Html5的一些02-特殊api,无法调用原生API,所以很多功能存在无法实现情况

临时性入口,用户留存率低

这既是它的优点,也是缺点,优点是无需安装,缺点是用完后有时候很难再找到,或者说很难专门为某个web app留存一个入口,导致用户很难再次使用

应用技术：ReactJS，AugularJS，VueJS等等

05-移动App开发-HybridApp介绍和特点

定义:混合模式移动应用，介于Web App、Native App这两者之间的App开发技术，兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势” ,原生客户端的壳WebView，其实里面是HTML5的网页

把网页打包成移动 App

使你的 Web 程序可以访问手机原生能力

优点：开发和发布都比较方便，效率介于Native App、Web App之间

开发成本较低,可以跨平台,调试方便

Hybrid模式下,由原生提供统一的API给JS调用,实际的主要逻辑有Html和JS来完成,而由于最终是放在webview中显示的,所以只需要写一套代码即可,达到跨平台效果,另外也可以直接在浏览器中调试,很为方便

最重要的是只需要一个前端人员稍微学习下JS api的调用即可,无需两个独立的原生人员

一般Hybrid中的跨平台最少可以跨三个平台:Android App,iOS App,普通webkit浏览器

维护成本低,功能可复用

同上,如果代码合理,只需要一名前端就可以维护多个app,而且很多功能还可以互相复用

更新较为自由

虽然没有web app更新那么快速,但是Hybrid中也可以通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果

针对新手友好,学习成本较低

这种开发模式下,只需要前端人员关注一些原生提供的API,具体的实现无需关心,没有新的学习内容,只需要前端人员即可开发

功能更加完善,性能和体验要比起web app好太多

因为可以调用原生api,所以很多功能只要原生提供出就可以实现,另外性能也比较接近原生了

部分性能要求的页面可用原生实现

这应该是Hybrid模式的最多一个好处了,因为这种模式是原生混合web,所以我们完全可以将交互强,性能要求高的页面用原生写,然后一些其它页面用JS写,嵌入webview中,达到最佳体验

缺点：学习范围较广，需要原生配合

相比原生,性能仍然有较大损耗

这种模式受限于webview的性能桎梏,相比原生而言有不少损耗,体验无法和原生相比

不适用于交互性较强的app

这种模式的主要应用是:一些新闻阅读类,信息展示类的app;但是不适用于一些交互较强或者性能要求较高的app(比如动画较多就不适合)

应用技术：Cordova、APPCan、 DCloud 、API Cloud

四种方式对比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mEns2X7B-1589879881945)(assets/zl9vgosvxs.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dtF3bDHb-1589879881947)(assets/4t0yf9dnpw.png)]

js模块化单独回顾~~~~~

06-移动App开发-跨平台开发介绍和特点

特点：使用类似于 Web 技术的方式来开发 Native App。

定义: Facebook发现Hybrid App存在很多缺陷和不足，于是发起开源的一套新的App开发方案RN。使用JSX语言写原生界面，js通过JSBridge调用原生API渲染UI交互通信。

优点：效率体验接近Native App，发布和开发成本低于Native App

虽然说开发成本大于Hybrid模式,但是小于原生模式,大部分代码可复用

相比于原生模式,这种模式是统一用JS写代码,所以往往只需要一名成员投入学习,即可完成跨平台app的开发,而且后续代码封装的好,很多功能可复用

性能体验高于Hybrid,不逊色与原生

这种模式和Hybrid不一样,Hybrid中的view层实际上还是dom,但是这种模式的view层是虚拟dom,所以性能要高于Hybrid,距离原生差距不大

这种模式可以认为是用JS写原生,即页面用JS写,然后原生通过Bridge技术分析JS,将JS内容单独渲染成原生Android和iOS,所以也就是为什么性能不逊色原生

开发人员单一技术栈,一次学习,跨平台开发

这种模式是统一由JS编写,有着独特的语法,所以只需要学习一次,即可同时开发Android和iOS

社区繁荣,遇到问题容易解决

这应该是React Native的很大一个优势,不像Hybrid模式和原生模式一样各自为营,这种模式是Facebook统一发起的,所以有一个统一的社区,里面有大量资源和活跃的人员,对开发者很友好

缺点: 学习有一定成本，且文档较少，免不了踩坑

虽然可以部分跨平台,但并不是Hybrid中的一次编写,两次运行那种,而是不同平台代码有所区别

这种模式实际上还是JS来写原生,所以Android和iOS中的原生代码会有所区别,如果需要跨平台,对开发人员有一定要求

当然了,如果发展了有一定时间,组件库够丰富了,那么其实影响也就不大了,甚至会比Hybrid更快

开发人员学习有一定成本

虽然社区已经比较成熟了,但是一个新的普通前端学习起来还是有一定学习成本的,无法像Hybrid模式一样平滑

学习成本大，对开发人员技术要求比较高

不懂原生开发很难驾驭好

说是使用 Web 技术进行开发，还是多少得学点儿原生 App 开发，才能处理好跨平台。

前期投入比较大，后劲很足。

应用技术 :

React Native（主流）

公司：Facebook

技术栈：React

基于React开发App的框架RN

其他技术:

Weex（使用不多）

公司：Apache 开源基金会

Vue.js 技术栈

基于Vue开发App的框架WEEX

Flutter（未来趋势）

公司：Google

它提供了官方的原生 UI 组件

比 RN、Weex 之类的体验更好

开发语言：Dart（和 JavaScript 很像）

商业应用：闲鱼

行业常识:

前端工程师 Web

FE客户端开发工程师

苹果开发工程师

安卓开发工程师

Web开发工程师

07-移动App开发-其他类型App

小程序

微信小程序

百度小程序

头条小程序

支付宝小程序

。。。

统一开发平台

taro(京东)->坑多趋势很好

uni-app

微网页

微信公众号

百度直达号

。。。

快应用（不温不火，iPhone 不参与很难搞起来）

各大手机厂商联合制定推出的一种方式，类似于小程序

使用 Web 技术进行开发，而且提供了在 Web 中访问手机硬件等底层交互的 API

属于混合 App 的一种方式

PWA（网站离线访问技术，没有 iPhone 不参与）

它可以让网站拥有一个类似于 App 的入口

提供了网站的离线应用访问

Google 在推动

手机端目前只能在安卓手机的 Chrome 浏览器运行

08-移动App开发-开发模式对比和选择

各大开发模式对比

Native App Web App Hybrid App React Native App

原生功能体验优秀差良好接近优秀

渲染性能非常快慢接近快快

是否支持设备底层访问支持不支持支持支持

网络要求支持离线依赖网络支持离线(资源存本地情况) 支持离线

更新复杂度高(几乎总是通过应用商店更新) 低(服务器端直接更新) 较低(可以进行资源包更新) 较低(可以进行资源包更新)

编程语言 Android(Java),iOS(OC/Swift) js+html+css3 js+html+css3 主要使用JS编写,语法规则JSX

社区资源丰富(Android,iOS单独学习) 丰富(大量前端资源) 有局限(不同的Hybrid相互独立) 丰富(统一的活跃社区)

上手难度难(不同平台需要单独学习) 简单(写一次,支持不同平台访问) 简单(写一次,运行任何平台) 挺等(学习一次,写任何平台)

开发周期长短较短中等

开发成本昂贵便宜较为便宜中等

跨平台**** 不跨平台**** 所有H5浏览器 Android,iOS,h5浏览器**** Android,iOS

APP发布 App Store Web服务器 App Store App Store

如何选择开发模式

目前有多种开发模式,那么我们平时开发时如何选择用哪种模式呢？如下

选择纯Native App模式的情况

性能要求极高,体验要求极好,不追求开发效率

一般属于吹毛求疵的那种级别了,因为正常来说如果要求不是特别高,会有Hybrid

选择Web App模式的情况

不追求用户体验和性能,对离线访问没要求

正常来说,如果追求性能和体验,都不会选用web app

没有额外功能,只有一些信息展示

因为web有限制,很多功能都无法实现,所以有额外功能就只能弃用这种方案了

选择Hybrid App模式的情况

大部分情况下的App都推荐采用这种模式

这种模式可以用原生来实现要求高的界面,对于一些比较通用型,展示型的页面完全可以用web来实现,达到跨平台效果,提升效率

当然了,一般好一点的Hybrid方案,都会把资源放在本地的,可以减少网络流量消耗

选择React Native App模式的情况

追求性能,体验,同时追求开发效率,而且有一定的技术资本,舍得前期投入

React Native这种模式学习成本较高,所以需要前期投入不少时间才能达到较好水平,但是有了一定水准后,开发起来它的优势就体现出来了,性能不逊色原生,而且开发速度也很快

选择其它方案

小程序（目前移动 App 中开发难度最低的，体验也是仅次于原生+跨平台NativeApp）

接活: 整包(8K+) || 按页面算(500静态||2K) => 另外的薪酬计算方式: 按时薪

08-补-如何分辨一个 App 是原生做的还是 Web 做的

1、看断网情况

通过断开网络，刷新页面，观察内容缓存情况来有个大致的判断，可以正常显示的就是原生写的，显示404或者错误页面的就是html页面。

3、看复制文章的提示，需要通过对比才能得出结果。

比如文章资讯页面可以长按页面试试，如果出现文字选择，粘贴功能的是H5页面，否则是native原生的页面。

有些原生APP开放了复制粘贴功能或者关闭了，而H5的CSS屏蔽了复制选择功能等情况，需要通过对目标测试APP进行对比才可知。

在支付宝APP、蚂蚁聚宝是可以判断的。

4、看加载的方式

如果在打开新页面导航栏下面有一条加载线的话，这个页面就是H5页面，如果没有就是原生的。

5、看app顶部，导航栏是否会有关闭的操作

如果APP顶部导航栏当中出现了关闭的按钮或者关闭的图标，那么当前的页面是H5页面，原生的不会出现（除非设计开发者特意设计），美团、大众点评的APP、微信APP当加载H5过多的时候，左上角会出现关闭两个字。

6、判断页面下拉刷新的时候（前提是要有下拉刷新的功能）

如果页面没有明显刷新现象的是原生的，如果有明显刷新现象（比如闪一下）的是H5页面（Ios和Android）。比如淘宝的众筹页面。

7、下拉页面的时候显示网址提供方的一定是H5页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f3zCdnlx-1589879881948)(/assets/wKiom1kKyzWDcmeRAARsWiUM4mA579.png-wh_500x0-wm_3-wmp_4-s_2902533966.png)]

8、利用系统开发人员工具

找到手机的设置，开发者选项，显示布局边界，选择开启后再去查看APP整体布局边界，这样所有应用控件布局就会一目了然。

如果是native APP那么每个按钮、文字、图片都是红色的线显示这个控件的布局情况。如下图的微信：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgspHUeP-1589879881949)(/assets/wKioL1kKzGzTEtNCAAXhWJHYlgI333.png-wh_500x0-wm_3-wmp_4-s_3312311617.png)]

如果是web APP那么应该就是一个webview去加载网页，webview作为一个控件，只有一个边界框，即只有屏幕边才有红色线，如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CS2nEto9-1589879881950)(/assets/wKioL1kKzXDhS9IMAAb9O0qy84c885.png-wh_500x0-wm_3-wmp_4-s_1494819383.png)]

混合APP 则是native 与 webview 混排的界面，如下图红色线框是各控件的绘制边界，中间那一大块布局丰富的界面没有显示出很多边界红线，就是网页实现的。如下图的京东：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ybr9EPcN-1589879881951)(/assets/wKioL1kKzjWjSa77AA10F9eHjLU763.png-wh_500x0-wm_3-wmp_4-s_2780626697.png)]

09-DCloud-HTML5+介绍-HBuliderX安装和创建项目

使用HBuliderX创建项目并且编码运行测试(网页测试/模拟器测试/真机测试)

下载安装HBuilderX

IDE:敲代码的软件.比如VSCode/WebStrom/HBuliderX

下载地址：https://www.dcloud.io/hbuilderx.html

创建项目

1. 新建项目

2. 5+runtime类型

3. 生成项目目录

4. 编码

5. 测试

1. 运行->选择chrome

2. 运行->选择安卓模拟器(夜神)

1

2

3

4

5

6

7

开发神器

软件名 everything+wox

作用:全局搜索软件或者文件

关键字: windows everything wox配置

原因: 提高开发效率 (没鼠标)

10-DCloud-HBuliderX模拟器测试和API测试

1. 在浏览器上测试效果

2. 在模拟器上测试

3. 在真机上测试

- 用手机助手连接手机（**安装驱动**）

- 开启手机的**开发者选项**

- **启用 USB 调试**

- 使用数据线连接手机

- 在 HBuilder 中找到：运行 -> 运行到手机或模拟器 -> 你的设备

- [HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题](http://ask.dcloud.net.cn/article/97)

1

2

3

4

5

6

7

8

9

访问 HTML5 + API

HTML5+ API Reference

11-DCloud-HBuliderX打包demo

打包发布

配置 manifest.json 文件

在 HBuilder 中找到：发行 -> 原生 App（云打包）

等待一段时间，得到打包结果安装包，然后安装到手机上测试

最后根据需要发布到对应的手机应用商店

配置 manifest

Manifest.json文档说明 manifest配置

打包

离线打包

云打包

12-DCloud-HBuliderX打包黑马头条

通过HBuliderX将黑马头条项目打包成app,生成apk文件下载安装测试

测试之前的网站效果

npm run build

http-server- o

打包app

复制manifest.json到public中

修改配置

发布(发行)

测试

————————————————

原文链接：https://blog.csdn.net/itwangyang520/java/article/details/106218920

2020-web前端-vue-Vue进阶