看了vue的文档,官方并没有看到类似http请求接口的方法. 然后查了一下vue的请求方法.基本都是用jquery的$.ajax 在success方法体 ,vue的双重绑定属性为什么有效果?没有进行脏值检查?

vuejs没有脏检查的概念吗?

member

6.2k11026

发布于
2017-11-17

更新于
2017-11-17

Vue 使用是 Observer 模型

少年，你问到了 Vue 技术最牛的地方

新建data时候，所有的数据都被转换成了observer，如图：

ObServer 会对变量的修改进行监控，原理主要是：

Object.defineProperty(Vue.prototype, "a", {
    get: function () {
        return xxx;
    },
    set: function(v) {
        .... 这里是关键
    },
    enumerable: true,
    configurable: true
});

当然具体实现比这个复杂的多的多，因为还有DOM的绑定

对其变量的修改，会反馈到任何曾经使用过过此变量的地方

比如如下模型：

<div id="a">{{b}}</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, 不仅会影响到a，还会影响到b，这是因为Observer的联动效果，

注意：如果不是因为Observer，而是传统的JS，b 在生成之后，值就固定了，永远等于aaabbb，而无法达到修改a，也让b也修改的效果。

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

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

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

这样会丢到数组内层的ObServer模型，下面的做法是可以的

//这样是可以的，因为Vue重写了数组的一些常见操作函数，让其支持Ob 
vm.c.push(3); 
//或者这样
Vue.Set(vm.c, [a, b, c]);

当然，可能有人说，这b是函数啊，取函数，肯定会重新计算，但是DOM的绑定和渲染呢，那可没有实时去调用函数，如果是使用一个setTimeout实时去对比，那岂不是非常浪费性能(即使 Angular 在外部对变量的修改，都需要用$scope函数触发的对比)
所以，只要修改a，DOM那边也是实时修改的。因为这就是Observer的功效，它会触发所有使用本变量的地方，一起联动