Vue.observable 是 Vue 2.6 新增的 API,用于将一个普通对象转换为响应式对象。它常用于在非 Vue 组件中使用 Vue 的响应式能力。
使用场景:
在 Vuex 的 store 中使用 Vue.observable 来实现 store 中的响应式状态。
在一些非 Vue 组件中,比如使用 jQuery 或原生 JavaScript 实现的 UI 库中,使用 Vue.observable 将数据变成响应式的。
以下是一个使用 Vue.observable 创建一个响应式对象的示例:
import Vue from 'vue'
const state = Vue.observable({
count: 0
})
export default state
在上述示例中,我们使用 Vue.observable 创建了一个名为 state 的响应式对象,其中包含一个属性 count。该对象可以通过 export 导出并在其他组件中引入使用。
在 Vuex 的 store 中使用 Vue.observable 的示例:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: Vue.observable({
count: 0
}),
mutations: {
increment(state) {
state.count++
}
}
})
export default store
在上述示例中,我们使用 Vue.observable 将 state 对象转换为响应式对象,并将其用于 Vuex 的 store 中。在 mutations 中通过直接修改 state 的方式修改数据,Vue 将会自动更新视图。