Vue2 Vueuse

Posted on  by admin

Pinned

VueUse不是Vue.use,它是为Vue 2和3服务的一套Vue Composition API的常用工具集,是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式,省去程序员自己写相关代码。.

我百度了一下VueUse,硬是没人写这方面的资料,大约是因为Vue 3还没有铺开使用吧。今天我直接说说VueUse在Vue 3里的用法。(如果Vue 2想使用的话,需要安装Vue Composition API插件。).

这个项目很大程度启发于react-use。Vue Compostion API支持了更好的逻辑分离,让这些常用的工具可以被复用,能够让你快速地构建丰富的应用。. Vue 3的Composition API的一大特点是让面向关注点,有了Composition API的加持,通用的工具集就很容易写出来了。. 我想让localStorage.abc = [1,2,3],然后把第二项改成22,怎么做?.

注意看,我每次修改的都是abc变量,我根本没有操作原生localStorage API,而且我操作的是数组,原生localStorage并不能直接操作数组。useLocalStorage会返回智能解析过的值,不再是字符串,而会是数组。.

这样我们就实现了原生localStorage API的响应式,而且,我们始终可以将localStorage.abc视为数组,尽管它在原生JS里是字符串。. 修改数组部分元素的方法:上面演示过,abc.value[1] = 22;。.

重赋值数组的方法:abc.value = reactive([1,2,3])。. TypeScript 9,406 MIT 867104(4 issues need help)29 Updated Apr 23, 2022.

  • JavaScript 1,575 MIT 86144 Updated Apr 19, 2022.
  • TypeScript 427 MIT 22232 Updated Apr 13, 2022.
  • JavaScript 228 MIT 1272 Updated Apr 10, 2022.
  • TypeScript 813 MIT 30132 Updated Apr 2, 2022.
  • JavaScript 122012 Updated Mar 29, 2022.
  • Vue 71 MIT 720 Updated Mar 27, 2022.
  • TypeScript 163 MIT 1031 Updated Jan 13, 2022.
  • Vue 15830 Updated Aug 9, 2021.
  • Miscellaneous

Taking myself as an example,useTemplateRefsList is a super practical method that I have used a lot in actual project development recently.

useTemplateRefsList: This method can help you to bind component refs quickly in for loops in vue3 component api. Think more complete than implementing it yourself.

In addition, there are all kinds of useful tools, such as useVModel, useInterval, useCssVar etc., all waiting for you to discover.

In short, this is a tool library that allows you to get off work earlier and get off work early.

Back in the day, vuex had the reputation of being "officially appointed, especially passed down by the ancestors" and monopolized the throne of vue state management, but too many people felt the complexity and inconvenience of its design when using it.

So, what are the advantages of Pinia?

  1. It doesn’t need to register. Mutation! Action can directly manipulate state.
  2. It supports the ability to enhance Pinia through plugins.
  3. Good Typescript support.
  4. Server-side rendering support.

Define:

Use:

Does it seem lighter than using vuex?

It is said that vuex 5.x also refers to Pinia's design ideas in the design of the API, which shows that Pinia has also been officially recognized.

Therefore, Pinia is indeed worth learning, and it is also a very potential framework for fire in 2022.

What are the advantages of Element Plus?

  1. The API is highly consistent with Element UI 2.x and the migration code and learning cost are small.
  2. The core implementation is highly similar to Element UI 2.x, such as the PopupManager that I introduced.
  3. Using the style definition mode of css var, the style switching is smoother.
  4. The trusted maintenance team.

It can be boldly predicted that Element-Plus will still explode in 2022.

Although Navie UI is only used in some small projects and demos, this project is really hilarious.

Let’s briefly enumerate the highlights of this framework:

  1. The completeness and richness of components are very impressive.
  2. Skinning and theme support are great.
  3. Excellent TypeScript support. TS is the God!

I personally like this project very much, but it really takes time to see how far it can go.

Hope it can be liked and used by more people in 2022!

At the moment when React and Vue are dominant (Angular: "What about me?"), we want a web single-page application (SPA), which is too simple. But it also caused other problems: Although single-page applications have a great experience, SEO is really a shortcoming.

Therefore, SSR came into being.

React has Next, Vue has Nuxt.

However, every brother who is determined to do “SSR” may have enough awareness: this is a deep pit, cautiously.

In 2022, SSR still is a strong demand for many companies.

Who will be the king of the front-end construction industry in 2022? My answer is Webpack. (Vite: “You praise people in my site?”)

However, the market of Webpack will deflate a large piece by Vite, especially small and medium-sized applications.

Why? It is because “fast”!

The most attractive place ofWebpack 5 is "Module Federation", which lays the leader of Webpack 5 in the micro-response scenario.

But not everyone needs “module federation”. There are many people’s demand is SPA, which is fast, just get starting.

Vite’s growth is far from its peak. 2022 is worth looking forward to!