当前位置:  首页>> 技术小册>> Vue面试指南

Vue.observable 是 Vue 2.6 新增的 API,用于将一个普通对象转换为响应式对象。它常用于在非 Vue 组件中使用 Vue 的响应式能力。

使用场景:

在 Vuex 的 store 中使用 Vue.observable 来实现 store 中的响应式状态。
在一些非 Vue 组件中,比如使用 jQuery 或原生 JavaScript 实现的 UI 库中,使用 Vue.observable 将数据变成响应式的。
以下是一个使用 Vue.observable 创建一个响应式对象的示例:

  1. import Vue from 'vue'
  2. const state = Vue.observable({
  3. count: 0
  4. })
  5. export default state

在上述示例中,我们使用 Vue.observable 创建了一个名为 state 的响应式对象,其中包含一个属性 count。该对象可以通过 export 导出并在其他组件中引入使用。

在 Vuex 的 store 中使用 Vue.observable 的示例:

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. const store = new Vuex.Store({
  5. state: Vue.observable({
  6. count: 0
  7. }),
  8. mutations: {
  9. increment(state) {
  10. state.count++
  11. }
  12. }
  13. })
  14. export default store

在上述示例中,我们使用 Vue.observable 将 state 对象转换为响应式对象,并将其用于 Vuex 的 store 中。在 mutations 中通过直接修改 state 的方式修改数据,Vue 将会自动更新视图。


该分类下的相关小册推荐: