vuex 与 vue有啥区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex 与 vue有啥区别相关的知识,希望对你有一定的参考价值。

首先vue是一个前端框架(与angular和react同级别),vuex只是vue的一个插件,官网说vuex是状态管理工具,其实说白了,vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器,就是说来存放处理公共数据的工具,存放的数据一变,各个组件都会更新,也就是说存放的数据是响应式的。 参考技术A Vuex 其实是一个针对 Vue 特化的 Flux,主要是为了配合 Vue 本身的响应式机制。当然吸取了一些 Redux 的特点,比如单状态树和便于测试和热重载的 API,但是也选择性的放弃了一些在 Vue 的场景下并不契合的特性,比如强制的 immutability(在保证了每一次状态变化都能追踪的情况下强制的 immutability 带来的收益就很有限了)、为了同构而设计得较为繁琐的 API、必须依赖第三方库才能相对高效率地获得状态树的局部状态等等(相比之下 Vuex 直接用 Vue 本身的计算属性就可以)所以 Vue + Vuex 会更简洁,也不需要考虑性能问题,代价就是 Vuex 只能和 Vue 配合。Vue + Redux 也不是不可以,但是 Redux 作为一个泛用的实现和 Vue 的契合度肯定不如 Vuex。 参考技术B Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

在 vuejs 中使用 vue $nextTick 与 setTimeout 0 有啥区别

【中文标题】在 vuejs 中使用 vue $nextTick 与 setTimeout 0 有啥区别【英文标题】:What is the difference between using vue $nextTick vs setTimeout 0 in vuejs在 vuejs 中使用 vue $nextTick 与 setTimeout 0 有什么区别 【发布时间】:2020-12-19 12:18:21 【问题描述】:

从Vue.js documentation,$nextTick 解释为:

将回调推迟到下一个 DOM 更新周期后执行。更改一些数据后立即使用它以等待 DOM 更新。

太棒了!所以第二条语句说在某些数据发生变化后立即使用它,我知道 setTimeout 与 0 也被立即调用。我创建了这个little sandbox 来理解这两种方法,但我似乎仍然没有理解这两种方法之间的区别?

我们将不胜感激任何关于它们差异的解释。

【问题讨论】:

【参考方案1】:

不同之处在于$nextTick 知道DOM 何时更新并相应地触发,而setTimeout 是幂等的并在 指定的毫秒延迟后触发。后者见this excellent answer,但要点是延迟是最小的,而不是确切的超时。


例如,您有一些状态会触发包含 <input> 元素

<input ref="textBox" v-if="showTextBox">

使用$nextTick,您可以安全地执行以下操作,因为只有在 DOM 更新为包含 &lt;input&gt; 后才会执行回调

this.showTextBox = true
this.$nextTick(() => 
  this.$refs.textBox.focus()
)

现在考虑(理论)情况,将&lt;input&gt; 添加到 DOM 所需的时间比触发 setTimeout 回调所需的时间长

this.showTextBox = true
setTimeout(() => 
  // will throw "Uncaught TypeError: Cannot read property 'focus' of undefined"
  this.$refs.textBox.focus() 
, 0)

【讨论】:

那么说 $nextTick 劫持数据并在不知道旧数据的情况下呈现它是否正确? 并非如此。它不会劫持任何东西。这只是表示 DOM 发生了变化的触发器或信号

以上是关于vuex 与 vue有啥区别的主要内容,如果未能解决你的问题,请参考以下文章

Vuex和单纯的全局对象有啥区别

vue和vue-cli的区别与联系

请问vuejs里的v-model 和:model有啥区别

在 vuejs 中使用 vue $nextTick 与 setTimeout 0 有啥区别

vue.js 中的 $http.get() 与 axios.get() 有啥区别?

vue2和vue3中vuex的区别和使用方法详解?