vuejs沒(méi)有臟檢查的概念嗎?

看了vue的文檔,官方并沒(méi)有看到類似http請(qǐng)求接口的方法.
然后查了一下vue的請(qǐng)求方法.基本都是用jquery的$.ajax
在success方法體 ,vue的雙重綁定屬性為什么有效果?沒(méi)有進(jìn)行臟值檢查?

回答

編輯回答

青裙

Vue 使用是 Observer 模型

少年，你問(wèn)到了 Vue 技術(shù)最牛的地方

新建data時(shí)候，所有的數(shù)據(jù)都被轉(zhuǎn)換成了observer，如圖：

ObServer 會(huì)對(duì)變量的修改進(jìn)行監(jiān)控，原理主要是：

Object.defineProperty(Vue.prototype, "a", {
    get: function () {
        return xxx;
    },
    set: function(v) {
        .... 這里是關(guān)鍵
    },
    enumerable: true,
    configurable: true
});

當(dāng)然具體實(shí)現(xiàn)比這個(gè)復(fù)雜的多的多，因?yàn)檫€有DOM的綁定

對(duì)其變量的修改，會(huì)反饋到任何曾經(jīng)使用過(guò)過(guò)此變量的地方

比如如下模型：

<div id="a">{}</div>
<script>
    let vm = new Vue({
        el: '#a',
            data () {
                return {
                    a: 'aaa',
                    c: [],
                };
            },
            computed: {
                b() {
                    return this.a + 'bbb';
                }
            }
        });
    console.log(vm.b); // 輸出 aaabbb
    vm.a = 'ccc';
    console.log(vm.b); // 輸出 cccbbb
    // 并且 div 也是 cccbbb
</script>

你在任意地方修改a, 不僅會(huì)影響到a，還會(huì)影響到b，這是因?yàn)?code>Observer的聯(lián)動(dòng)效果，

注意：如果不是因?yàn)?code>Observer，而是傳統(tǒng)的JS，b 在生成之后，值就固定了，永遠(yuǎn)等于aaabbb，而無(wú)法達(dá)到修改a，也讓b也修改的效果。

所以，你在任何地方修改它的變量都可以，哪怕是`$.ajax({success: 這里})`，

但是需要注意的是，Array、Object之類的值，不能直接全部修改

// 直接等于其它值，是不行的
vm.c = [1, 2];

這樣會(huì)丟到數(shù)組內(nèi)層的ObServer模型，下面的做法是可以的

//這樣是可以的，因?yàn)閂ue重寫(xiě)了數(shù)組的一些常見(jiàn)操作函數(shù)，讓其支持Ob 
vm.c.push(3); 
//或者這樣
Vue.Set(vm.c, [a, b, c]);

當(dāng)然，可能有人說(shuō)，這b是函數(shù)啊，取函數(shù)，肯定會(huì)重新計(jì)算，但是DOM的綁定和渲染呢，那可沒(méi)有實(shí)時(shí)去調(diào)用函數(shù)，如果是使用一個(gè)setTimeout實(shí)時(shí)去對(duì)比，那豈不是非常浪費(fèi)性能(即使 Angular 在外部對(duì)變量的修改，都需要用$scope函數(shù)觸發(fā)的對(duì)比)
所以，只要修改a，DOM那邊也是實(shí)時(shí)修改的。因?yàn)檫@就是Observer的功效，它會(huì)觸發(fā)所有使用本變量的地方，一起聯(lián)動(dòng)