前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍对Vue.observable的了解。
一、Observable是什么
- 定义:让一个对象变成响应式数据,Vue内部会用它来处理data函数返回的对象。
- 返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。
Vue.observable({count:1})
其作用等同于new Vue({count:1})
。- 在Vue2中,被传入的对象会直接被Vue.observable变更,它和被返回的对象是同一个对象;Vue3中,会返回一个可响应的代理,而对源对象直接进行变更仍然是不可响应的。
二、使用场景
在非父子组件通信时,通常使用$bus或者vuex,但是实现的功能不复杂,又使用上面的方法又有点繁琐,这时,observable是一个很好的选择。
- 创建一个js文件
import Vue from 'vue'
export let state = Vue.observable({
name: '张三',
age:38,
})
export let mutations = {
changeName(name) {
state.name = name
console.log(state.name)
},
setAge(age) {
state.age = age
console.log(state.age)
}
}
- 在.vue文件中使用
<template>
<div>
{{name}},{{age}}
<button @click="changeName('李四')">changeName</button>
<button @click="setAge(18)">setAge</button>
</div>
</template>
<script>
import {state,mutations} from './test.js'
export default {
computed:{
name(){
return state.name
},
age() {
return state.age
}
},
methods: {
changeName: mutations.changeName,
setAge:mutations.setAge,
}
}
</script>
三、面试官:介绍一下Observable
回答:Observable可以定义一些数据,并使其变成响应式数据。如果在js中写observable,这里面的数据vue文件中可以直接使用。