vue.observable

作者：还依然存在发布日期:2026-02-10 浏览:50

// 使用 vue.observable 创建一个响应式对象

import Vue from 'vue';

const state = Vue.observable({
  count: 0
});

// 解释：Vue.observable 是 Vue 2.6+ 引入的一个方法，用于创建一个响应式的对象。
// 这个对象可以被 Vue 组件或其他响应式系统所使用。

function increment() {
  state.count++;
}

// 在 Vue 组件中使用这个响应式对象
new Vue({
  el: '#app',
  data() {
    return {
      localState: state
    };
  },
  template: `<div>{{ localState.count }}</div><button @click="increment">Increment</button>`,
  methods: {
    increment
  }
});

解释说明：

Vue.observable 方法创建了一个响应式的对象。这个对象可以在 Vue 组件之外定义，并且仍然保持响应式特性。
在上面的代码中，我们创建了一个名为 state 的响应式对象，它包含一个属性 count。
我们定义了一个 increment 函数来增加 count 的值。
最后，在 Vue 组件中，我们将 state 对象绑定到组件的 data 中，并通过模板和方法来展示和修改它的值。

上一篇：vue.prototype

下一篇：vue3全局变量