vue2的Vue.observable
在Vue.js 2中,Vue.observable
是一个用于创建可观察对象的方法。可观察对象是一个能够让你监听其变化并触发相应操作的对象。
以下是一个使用 Vue.observable
的示例:
import Vue from 'vue';
// 创建一个可观察对象
const data = Vue.observable({
message: 'Hello, Vue!'
});
// 在组件中使用可观察对象的属性
const app = new Vue({
data: {
sharedData: data
},
created() {
console.log(this.sharedData.message); // 输出: "Hello, Vue!"
}
});
// 修改可观察对象的属性
data.message = 'Hello, Vue 2!';
// 组件中的属性也会自动更新
console.log(app.sharedData.message); // 输出: "Hello, Vue 2!"
在上面的示例中,我们使用 Vue.observable
方法创建了一个名为 data
的可观察对象,其中包含一个属性 message
。然后,我们创建了一个Vue实例 app
,将 data
对象赋值给 sharedData
属性。在Vue实例的 created
钩子函数中,我们打印了 sharedData.message
的值。
当我们修改 data.message
的值时,app.sharedData.message
的值也会自动更新,因为它们引用同一个可观察对象。
这就是在Vue.js 2中使用 Vue.observable
的基本用法。它使我们能够创建共享的可观察对象,使数据在不同组件之间保持同步,并在数据变化时触发相应的更新。
使用场景
在非父子组件通信时,可以使用通常的bus
或者使用vuex
,但是实现的功能不是太复杂,而使用上面两个又有点繁琐。这时,observable
就是一个很好的选择
创建一个js
文件
// 引入vue
import Vue from 'vue
// 创建state对象,使用observable让state对象可响应
export let state = Vue.observable({
name: '张三',
'age': 38
})
// 创建对应的方法
export let mutations = {
changeName(name) {
state.name = name
},
setAge(age) {
state.age = age
}
}
在.vue
文件中直接使用即可
<template>
<div>
姓名:{
{ name }}
年龄:{
{ age }}
<button @click="changeName('李四')">改变姓名</button>
<button @click="setAge(18)">改变年龄</button>
</div>
</template>
import { state, mutations } from '@/store
export default {
// 在计算属性中拿到值
computed: {
name() {
return state.name
},
age() {
return state.age
}
},
// 调用mutations里面的方法,更新数据
methods: {
changeName: mutations.changeName,
setAge: mutations.setAge
}
}