vue observer取值

在 Vue 中，可以使用 `Vue.observable` 方法将一个普通对象转换为可观察对象，然后使用 `Vue.observe` 方法监听对象的变化。

例如，有一个对象 `obj`：

const obj = Vue.observable({
  message: 'Hello'
})

可以使用 `Vue.observe` 方法监听 `message` 属性的变化：

Vue.observe(() => {
  console.log(obj.message)
})

这样，当 `obj.message` 的值发生变化时，就会触发回调函数并输出新的值。

另外，在组件中也可以使用 `this.$watch` 方法监听数据变化，例如：

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  created() {
    this.$watch('message', (newVal, oldVal) => {
      console.log(`message changed from ${oldVal} to ${newVal}`)
    })
  }
}

这样，当 `message` 的值发生变化时，就会触发回调函数并输出新的值。

相关问题

vue Observer

在Vue中，Observer是一个用于观察数据变化的功能。当我们创建一个Vue实例时，Vue会通过检查对象是否有__ob__属性来判断该对象是否已经处于Observer的观察中。如果不存在__ob__属性，则会通过new Observer来观察该对象。Observer会对对象的属性进行递归遍历，将每个属性转换为getter和setter，并添加Dep对象进行依赖收集。

Dep是Observer与Watcher之间的纽带。当数据发生变化时，Observer会观察到变化，并通知Dep对象，然后Dep对象会通知到所有依赖的Watcher对象，使其进行相应的操作，例如更新视图。

Watcher是数据的订阅者。Watcher会被创建并与特定的数据相关联，当数据发生变化时，Watcher会接收到通知，并执行相应的操作，例如更新视图。Watcher可以订阅多个数据，并且在数据变化时进行批量处理，以提高性能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue原理解析之observer模块](https://blog.csdn.net/weixin_34211761/article/details/89083751)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

Vue.observer

在Vue.js中，`Vue.observer`是一个错误的写法，正确的写法是`Vue.observable`。

`Vue.observable`是 Vue.js 2.6.0+ 引入的一个全局方法，用于创建一个可观察的对象。可观察对象是一种特殊的对象，可以监听其属性的变化，并在变化时触发相应的响应。

使用 `Vue.observable` 方法可以将一个普通的 JavaScript 对象转换为可观察对象。一旦对象被转换为可观察对象，就可以使用 Vue.js 的响应式系统来追踪其属性的变化。

下面是一个示例：

import Vue from 'vue';

const data = { count: 0 };

const observableData = Vue.observable(data);

// 在组件中使用 observableData
// ...

在上述示例中，我们使用 `Vue.observable` 将 `data` 对象转换为可观察对象 `observableData`。现在，`observableData` 对象的 `count` 属性就可以被 Vue.js 的响应式系统追踪，并在属性变化时触发响应。

需要注意的是，`Vue.observable` 方法只能用于将对象转换为可观察对象，而不能用于函数或数组。如果需要观察数组或函数的变化，可以使用 Vue.js 提供的其他方法，如 `Vue.set` 和 `Vue.watch`。