新整理的前端面试题_vuex和pinia的区别面试题

pinia和vuex的区别

（1）pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据

（2）pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点

（3）pinia语法上比vuex更容易理解和使用，灵活。

（4）pinia没有modules配置，没一个独立的仓库都是definStore生成出来的

（5）pinia state是一个对象返回一个对象和组件的data是一样的语法

Vuex 和 Pinia 的优缺点

Pinia的优点

完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易

极其轻巧(体积约 1KB)

store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见

支持多个Store

支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点

不支持时间旅行和编辑等调试功能

Vuex的优点

支持调试功能，如时间旅行和编辑

适用于大型、高复杂度的Vue.js项目

Vuex的缺点

从 Vue 3 开始，getter 的结果不会像计算属性那样缓存

Vuex 4有一些与类型安全相关的问题

何时使用Pinia，何时使用Vuex

个人感觉：，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。

将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。

pinia和vuex在vue2和vue3都可以使用，一般来说vue2使用vuex,vue3使用pinia。

vue、小程序、uniapp优缺点

vue

优点

组件化开发，提升效率，方便复用，便于协同开发

单页面路由

双向数据绑定

易于结合其他的第三方库

丰富的api方法

轻量高效

MVVM，数据驱动视图

轻量级的框架

渐进式

缺点

缺少高阶教程和文档

生态环境不如angular和react

社区不大

不支持ES5的浏览器无法使用，如ie8

vue的响应系统无法检测属性的添加和删除，以及某些数组的修改

报错不明显，适合单人开发或者中小型项目

不利于SEO优化

小程序

优点

开发门槛低，难度比app小

克服了不同系统、不同手机版本的不兼容性

自带推广，如附近的小程序

触手可及、用完即走

小程序码

成本更低，相对于app

使用即是用户

打开速度快

小程序名称是唯一的

用户基量大

缺点

无法大型开发，只有2M大小(现已经在测试20M大小的,另可以使用分包解决)

局限性，必须依赖于微信才可以运行

不能跳转外链网址

框架不稳定成熟，需经常维护

用户留存率低

不能直接分享到朋友圈

上架需审核，比H5即做即用麻烦

uniapp

优点

是一套可以适用于多端的开源框架，一套代码可以编译成多端使用

学习成本低，语法是vue的，组件和api是小程序的

扩展能力强

使用HbuildX开发，丰富的语法提示，开发速度较快

突破了系统对原生H5调用功能的限制

缺点

问世时间短，有很多地方不完善

官方反馈不及时

文件命名受限制

兼容性，在Android平台比微信小程序和iOS差

社区不大

什么是webview

一 WebView到底是什么

　 1 WebView是一种控件，它基于webkit引擎，因此具备渲染Web页面的功能。　　

　　2 基于Webview的混合开发，就是在 Anddroid os(安卓)/I os(苹果)原生APP里，通过WebView控件嵌入Web页面。

　　你手机里有淘宝软件吧？

　　就是外边是个原生APP的壳，内容是H5页面(基于html+css+js的Web页面)。

　　包括淘宝app，阿里云app（笔者目前做阿里云app组件库的开发）等等在内，现在的移动端混合开发软件，如果对于交互渲染要求不是特别高的项目，基本都是这么玩的。

3、webview与H5是相辅相成的，webview可以理解为我们手机上内嵌的一种浏览器，可以加载一些网页的页面，而H5可以理解成是html5，html5可以简单的理解成它是html的一种技术，webview可以加载html5

二、Webview常用方法

1、加载URL

可以根据资源分为三种:

//方式1. 加载一个网页：

webView.loadUrl(“百度一下，你就知道“);

//方式2：加载apk包中的html页面

webView.loadUrl(“file:///android_asset/test.html”);

//方式3：加载手机本地的html页面

webView.loadUrl(“content://com.android.htmlfileprovider/sdcard/test.html”);

// 方式4： 加载 HTML 页面的一小段内容

WebView.loadData(String data, String mimeType, String encoding)

// 参数说明：

// 参数1：需要截取展示的内容

// 内容里不能出现 ’#’, ‘%’, ‘\’ , ‘?’ 这四个字符，若出现了需用 %23, %25, %27, %3f 对应来替代，否则会出现异常

// 参数2：展示内容的类型

// 参数3：字节码

严格模式this指向谁

1.在严格模式下，普通的this指向，指向的是window

2.在严格模式下，函数中的this指向，指向的是undefined

3.对象中的this，指向的实例出来的对象

4.构造函数中的this,指向的是实例出来的对象

5、事件中的对象this，指向的是触发该事件的对象

6、定时器中的this，指向的是window