跳至主要內容

Mr.Cao...大约 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()构造出一个对象响应式对象

上次编辑于:
贡献者: Caofangshuai
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8