Vue.observable

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:

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

const Demo = {
   
  render(h) {
   
    return h('button', {
   
      on: {
    click: () => {
    state.count++ }}
    }, `count is: ${
     state.count}`)
  }
}

Vue 2.x 中,被传入的对象会直接被 Vue.observable 变更,所以如这里展示的,它和被返回的对象是同一个对象。
Vue 3.x 中,则会返回一个可响应的代理,而对源对象直接进行变更仍然是不可响应的。
因此,为了向前兼容,我们推荐始终操作使用 Vue.observable 返回的对象,而不是传入源对象。
Vue.observable 方法是 Vue 2.6.0 新增的全局方法,用于创建一个可观察的数据对象。它可以在 Vue 组件中用于声明响应式数据,类似于 data 选项,但可以在组件范围外使用。

下面是一些情况下使用 Vue.observable 的示例:

  1. Vuex Store 中使用:Vue.observable 可以创建一个响应式的状态管理对象,将其用作 Vuex Store 中的状态。这样,可以在多个组件间共享该状态。
import Vue from 'vue';
export const store = Vue.observable({
   
  count: 0
});
export const mutations = {
   
  increment() {
   
    store.count++;
  },
  decrement() {
   
    store.count--;
  }
};
  1. 在非组件的 JavaScript 模块中使用:Vue.observable 可以用于创建一个响应式的对象,用于存储全局的共享数据,并在不同的模块中进行读写操作。
import Vue from 'vue';
export const sharedData = Vue.observable({
   
  username: '',
  isLoggedIn: false
});
export function setUser(username) {
   
  sharedData.username = username;
  sharedData.isLoggedIn = true;
}

可以使用 sharedData 对象在不同的模块中读取和修改共享数据。

需要注意的是,Vue.observable 创建的对象是可观察的,但它并不具备 Vue 组件实例的其他功能,如生命周期、计算属性等。因此,在使用 Vue.observable 创建的对象时,需要手动进行状态管理和触发响应更新。

而对于一般的组件使用,data 选项仍然是首选的方式,因为它提供了更多的功能和便利性,比如自动的响应式、计算属性、对属性值进行校验等。只有在需要全局共享的数据或在非组件模块中使用响应式对象的情况下,才需要考虑使用 Vue.observable

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-07 15:48:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-07 15:48:01       101 阅读
  3. 在Django里面运行非项目文件

    2023-12-07 15:48:01       82 阅读
  4. Python语言-面向对象

    2023-12-07 15:48:01       91 阅读

热门阅读

  1. 剑指 Offer(第2版)面试题 19:正则表达式匹配

    2023-12-07 15:48:01       64 阅读
  2. 在Django中使用Q对象和条件运算符来构建动态查询

    2023-12-07 15:48:01       69 阅读
  3. Python环境管理利器-Anaconda介绍与安装

    2023-12-07 15:48:01       61 阅读
  4. Django 中的 HMAC 请求签名校验与 Vue.js 的完美协作

    2023-12-07 15:48:01       62 阅读
  5. AIGC: 关于ChatGPT中API接口调用相关准备工作

    2023-12-07 15:48:01       61 阅读
  6. git 修改 commit 未推送的信息

    2023-12-07 15:48:01       59 阅读
  7. KALI LINUX入门

    2023-12-07 15:48:01       47 阅读
  8. 代码规范及开发工具

    2023-12-07 15:48:01       68 阅读
  9. Linux虚假唤醒

    2023-12-07 15:48:01       62 阅读
  10. Python【走出棋盘】

    2023-12-07 15:48:01       50 阅读