...大约 1 分钟
Vue.observable()
提供了一个创造响应式属性的方法,可以非常方便的使用响应式属性,在小项目中可以不用vuex,直接用这个api创建响应式属性来管理状态
示例代码:
<div id="app1">
实例一{{message}}
<button @click="change">Change</button>
</div>
<div id="app2">实例二{{message}}</div>
<script>
//创建响应式属性state
const state = Vue.observable({ message: "Vue 2.6" })
//提供操作方法
const mutations = {
setMessage(value) {
state.message = value
}
}
new Vue({
el: "#app1",
computed: {
message() {
return state.message
}
},
methods: {
change() {
mutations.setMessage("Vue 3.0")
}
},
})
//示例二的message也会跟住改变形成响应式属性
new Vue({
el: "#app2",
computed: {
message() {
return state.message
}
}
})
</script>
实例二的message也会跟住改变形成响应式属性
来看执行原理:
下面是源码
// 2.6 explicit observable API
Vue.observable = function (obj) {
observe(obj);
return obj
};
可以看出关键还是observe()这个方法,那么这个方法可能很熟悉了 就是创建一个响应式对象底层还是用的Object.defineprototype这个方法,看一下源码:
function observe (value, asRootData) {
if (!isObject(value) || value instanceof VNode) {
return
}
var ob;
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__;
} else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
ob = new Observer(value);
}
if (asRootData && ob) {
ob.vmCount++;
}
return ob
}
可以看出先判断对象下边有_ob_ 最后new Observer()
构造出一个对象响应式对象
Powered by Waline v2.15.8