vue和小程序的比较

vue的钩子函数:

beforeCreat: 创建前

created: 创建

beforeMount: 挂载前

mounted: 挂载

beforeupdate: 更改前

updated: 更改

beforeDestroy: 销毁前

destroyed: 销毁

小程序的钩子函数:

onLoad: 页面加载

onShow: 页面显示

onReady: 页面初次渲染完成

onHide: 页面隐藏

onUnload: 页面卸载

vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据

vue动态绑定一个变量的值为元素的某个属性铅碰的时候，会在变量前面加上冒号：

小程序绑定某个变量的值为元素属性时，会用两个大括号括起来

vue使用v-if 和v-show控制元素的显示和亏激粗隐藏

小程序使用wx-if和hidden控制元素的显示和隐藏

vue使用v-on:event绑定事件，或者使用@event绑定事件，@event.stop阻止事件冒泡

小程序用bindtap(bind+event)，或者catchtap(catch+event)绑定事件，阻止事件冒泡

vue中如下:

小程序中如下：

vue中的表单元素上加v-model，然后再绑定data中对应的值

小程序中通过this.setData({key:value})将表单上的值赋值给data中的对应值

vue中需要在触发事件的方法中，把需要传递的数据作为形参传入

小程序中需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过e.currentTarget.dataset.*的销镇方式获取，从而完成参数传递

说明 ：uni-app基于 Vue 2.0 实现，开发者需注意Vue 1.0 ->2.0 的使用差异，详见 从 Vue 1.x 迁移 。

uni-app不仅支持应用生命周期和页面生命周期，还支持 vue 实例的如下生命周期函数：

注意 ：不要在选项属性或回调上使用箭头函数，比如 created: () =>console.log(this.a) 或 vm.$watch('a', newValue =>this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。

几乎全支持 Vue官方文档：模板语法 ，下面讲下不支持的情况。

(1)不支持纯HTML

uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用，可以使用 rich-text组件 代替。或者使用三方组件wxparse，在hello uni-app中有示例。

(2)不支持部分复杂的 JavaScript 渲染表达式

非H5端无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === ><[] .，剩下的还待完善。

(3)不支持过滤器

编译到 App 和小程序平台时不支持使用过滤器，可以使用计算属性（computed）提前计算出数据（如果是数组类型，就提前计算整个数组），用以代替过滤器。

备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持使用过滤器。

data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

注意 ：在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不凯歼支持：

需修改为：

支持 Vue官方文档：计算属性 。

实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考： uni-app全局变量的几种实现方式 。

非H5端不支持在 template 内使用 methods 中的函数。

备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持支持在 template 内使用 methods 中的函数。

为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。

全支持 Vue官方文档：条件渲染 。

全支持vue列表渲染 Vue官方文档：列表渲染 。只是需要注意一点，嵌套列表渲染，必须指定不同的索引！需要填写 :key="xx" 。

注意 ：同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。

几乎全支持 Vue官方文档：事件处理器 。事件映射表如下所示：

注意 ：

(1)事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中盯码冲区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>。

(2)为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。

(3)事件修饰符

(4)若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

(5)按模兆键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。

支持 Vue官方文档：表单控件绑定 。建议开发过程中直接使用 uni-app：表单组件 。用法示例：

(1)H5 的select 标签用 picker 组件进行代替

(2)表单元素 radio 用 radio-group 组件进行代替

组件是整个 Vue.js 中最复杂的部分，支持 Vue官方文档：组件 。有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render ，和 <script type="text/x-template"> 字符串模版等非H5端都不支持。详细的非H5端不支持列表：

(1)暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name"></card>样式是不会生效的)。

Slot（scoped 暂时还没做支持）

(2)动态组件

(3)异步组件

(4)inline-template

(5)X-Templates

(6)keep-alive

(7)transition

(8)class

(9)style

(10)组件里使用 slot 嵌套的其他组件时不支持 v-for

uni-app提供了丰富的 UI组件 ，比如： picker , map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName" 。如:

uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。 注意 ：Vue.component 的第一个参数必须是静态的字符串。示例：

(1)main.js 里进行全局注册

(2)index.vue 里可直接使用组件

在 uni-app 中以下这些作为保留关键字，不可作为组件名。

备注 ：除以上列表中的名称外，标准的 HTML 及 SVG 标签名也不能作为组件名。

(1) 如何获取上个页面传递的数据

在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。

(2) 如何设置全局的数据和全局的方法

uni-app内置了 vuex ，在app里的使用，可参考 hello-uniapp 的 store/index.js 。

(3)如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

(4)组件属性设置不生效解决办法

当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。解决办法有两种（以scroll-view组件为例）：

备注 ：第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。

第二章 面试题基础篇

2.1 HTML面试题

面试题：行内元素有哪些没丛？块级元素有哪些？ 空(void)元素有那些？

面试题：页面导入样式时，使用link和@import有什么区别？

面试题：title与h1的区别、b与strong的区别、i与em的区别？

面试题：img标签的title和alt有什么区别？

面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

2.2 CSS面试题

面试题：css背景纹路

面试题：介绍一下CSS的盒子模型

面试题：CSS选择符有哪些？哪些属性可以继承？

面试题：CSS优先级算法如何计算？

面试题：用CSS画一个三角形

面试题：一个盒子不给宽度和高度如何水平垂直居中？

面试题：display有哪些值？说明他们的作用。

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

面试题：清除浮动有哪些方式？

面试题：在网页中的应该使用奇数哪察灶还是偶数的字体？为什么呢？

面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

面试题：什么是CSS reset？

面试题：css sprite是什么,有什么优缺点

面试题：display: none与visibility: hidden的区别

面试题：position有哪些值?有什么作用? 【特别多公司问】

面试题：line-height和height有什么区别？

面试题：opacity 和 rgba区别

2.3 JavaScript基础面试题

面试题：延迟加载JS有哪些方式？

面试题：JS数据类型有哪些？

面试题：null和undefined的区别

面试题：JS数据类型考题

面试题：==和===有什么不同

面试题：JS微任务和宏任务

面试题：JS作用域考题

面试题：JS对象考题

面试题：JS作用域+this指向+原型 考题

面试题：JS判断变量是不是数组，你能写出哪些方法？

面试题：slice是干嘛的、splice是否会改变原数组

面试题：JS数组去重

面试题：找出多维数组最大值

面试题：给字符串新增方法实现功能

面试题：找出字符串出现最多次数的字符以及次数

2.4 真正移动端 —— H5/C3面试题

面试题：什么是语义化标签

面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

面试题：如何关闭iOS键盘首字母自动大写

面试题：怎么让Chrome支李扮持小于12px 的文字？

面试题：rem和em有什么样区别

面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

面试题：webkit表单输入框placeholder的颜色值能改变吗？

面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

面试题：禁止ios和android用户选中文字

面试题：自适应 [淘宝无线适配]

面试题：响应式

第三章 面试题进阶篇

3.1 JavaScript进阶面试题

面试题：new *** 作符具体做了什么

面试题：闭包 【必须会】

面试题：原型链 【必须会】

面试题： JS继承有哪些方式

面试题：说一下call、apply、bind区别

面试题：sort背后原理是什么？

面试题：深拷贝和浅拷贝

面试题：localstorage、sessionstorage、cookie的区别

3.2 ES6面试题

面试题：var、let、const区别

面试题：作用域考题

面试题：将下列对象进行合并

面试题：箭头函数和普通函数有什么区别？

面试题：Promise有几种状态

面试题：find和filter的区别 【大厂】

面试题：some和every的区别 【大厂】

3.3 webpack面试题

面试题：webpack插件

3.4 Git面试题

面试题：git常用命令

面试题：解决冲突

面试题：GitFlow

第四章 面试题框架篇

4.1 区分初中高级的 —— Vue面试题

面试题：Vue2.x 生命周期有哪些？

1.系统自带八个

2.当一旦进入到某个组件会执行哪些生命周期

3.$el和$data在哪个阶段有

4.如果使用keep-alive会多俩个生命周期

5.如果加入keep-alive第一次进入组件会执行哪些生命周期

6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期

面试题：谈谈你对keep-alive的了解

面试题：v-if和v-show区别

面试题：v-if和v-for优先级 2.x

面试题：ref是什么？

面试题：nextTick是什么？

面试题：Vue中如何做样式穿透

面试题：scoped原理

面试题：Vuex是单向数据流还是双向数据流？

面试题：讲一下MVVM

面试题：双向绑定原理

面试题：什么是虚拟DOM

面试题：key是干什么？

面试题：diff算法

面试题：Vue组件传值

面试题：props和data优先级谁高？

面试题：computed、methods、watch有什么区别？

面试题：Vuex

面试题：Vue路由

面试题：Vue项目打包后出现空白页

4.2 微信小程序面试题

面试题：如何自定义头部？

面试题：如何自定义底部？

4.3 uni-app面试题

面试题：生命周期

面试题：条件编译

第五章 面试题性能优化篇

---