首先不应该使用箭头函数来定义计算属性函数 (例如 aDouble:
 () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向
 Vue 实例，this.a 将是
 undefined。
需求如下：



















邮箱和编码联动：
规则是邮箱是编码+@xx.com
代码如下
this.add_customer_form.buyer_code为绑定编码
this.add_customer_form_email为绑定的邮箱
computed：





ok，没问题操作上面编码下面会联动；
but，懂你操作下面email的时候会报错：



vue.esm.js?101b:476 [Vue warn]: Computed property "add_customer_form_email" was assigned to but it has no setter.

这是因为没有给动态计算属性设置set。
然后我们这样：



but 还是会报错：
Error in event handler for "input": "RangeError: Maximum call stack size exceeded"
栈溢出
最后我用一个中间变量 add_customer_form_email_2


其实这里用watch方法更简洁 建议动态计算的变量有操作的机会的话或类似的场景，
用watch




查了下vue中关于这块的源码：



也就是传入的是一个函数，或者传入的对象里没有 set 属性，当你尝试直接该改变这个这个计算属性的值，都会报这个错误。

Vue实现响应式后DOM的变化
data对象中数据改变是如何追踪的?
vue将遍历data对象中所有的属性，并通过 Object.defineProperty 把这些属性全部转为 getter/setter；但是我们是没有办法看到 getter/setter的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。
每个组件都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
Vue是无法检测到data对象属性的添加和删除
原因：Vue在对初始化组件时会对对象属性执行getter/setter转化，所以属性必须在data对象上存在才能让Vue将它转化为初始化。
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
如何动态添加根级别的响应式属性【就是对data添加属性】
this.$set(this.someObject,'b',2)
异步更新队列
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。
然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。
当刷新队列时，组件会在下一个事件循环“tick”中更新。
多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如：
{{message}}
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：
Vue.component('example', {
template: '{{ message }}',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2017 async/await 语法完成相同的事情：
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
实例化理解Vue响应化
Price :￥{{ price }}
Total:￥{{ price * quantity }}
Taxes: ￥{{ totalPriceWithTax }}
改变价格
var app = new Vue({
el: '#app',
data() {
return {
price: 5.0,
quantity: 2
};
},
computed: {
totalPriceWithTax() {
return this.price * this.quantity * 1.03;
}
},
methods: {
changePrice() {
this.price = 10;
}
}
})
上例中当price 发生变化的时候，Vue就知道自己需要做三件事情：
更新页面上price的值
计算表达式 price*quantity 的值，更新页面
调用totalPriceWithTax 函数，更新页面
数据发生变化后，会重新对页面渲染，这就是Vue响应式，那么这一切是怎么做到的呢？
想完成这个过程，我们需要：
侦测数据的变化
收集视图依赖了哪些数据
数据变化时，自动“通知”需要更新的视图部分，并进行更新
对应专业俗语分别是：
数据劫持 / 数据代理
依赖收集
发布订阅模式
总结
再来回顾下整个过程：
在new Vue()后， Vue 会调用_init函数进行初始化，也就是init 过程，在 这个过程Data通过Observer转换成了getter/setter的形式，来对数据追踪变化，当被设置的对象被读取的时候会执行getter函数，而在当被赋值的时候会执行setter函数。
当外界通过Watcher读取数据时，会触发getter从而将Watcher添加到依赖中。
在修改对象的值的时候，会触发对应的setter，setter通知之前依赖收集得到的 Dep 中的每一个 Watcher，告诉它们自己的值改变了，需要重新渲染视图。这时候这些 Watcher就会开始调用update来更新视图。
以上就是本次介绍的全部相关知识点内容，如果大家学习中有任何补充可以联系脚本之家小编。

	

前言
vue是采用数据劫持配合发布者-订阅模式的方式，通过Object.definePropery()来劫持各个属性的setter和getter，在数据变动时发布消息给消息订阅器-Dep，通知订阅者-Watcher，触发相应回调函数，去更新视图。
vue创建实例的时候，MVVM作为绑定的入口，整合Observer, Compile和Watcher三种，通过Observer来监听model数据变化，通过Compile解析编译模板指令，最终利用Watcher搭起了Observer, Compile之前的通信桥梁，达到数据变化=>视图更新；视图交互变化=>数据model变更的双向绑定效果。
实现 Observer
Observer是一个数据监听器，用来劫持监听所有属性，如果有变动，就通知订阅者
核心方法是用Object.defineProperty()，递归遍历所有属性，给每个属性加上setter和getter，当给对象的某个属性赋值，就会触发 setter, 那么就能监听到了数据变化。
怎么通知订阅者？消息订阅器(Dep)-调度中心
需要实现一个消息订阅器-Dep，来收集所有订阅者-Watcher
Observer中植入消息订阅器-Dep
数据变动触发Dep的notify，再调用订阅者的update方法
订阅器Dep添watcher的方法放在Observer的getter里面(原因看watcher实现)
如下代码，实现了一个Observer
//实现一个`Observer`对象
class Observer{
    constructor(data){
        this.observe(data);
    }
    // data是一个对象，可能嵌套其它对象，需要采用递归遍历的方式进行观察者绑定
    observe(data){
        if(data && typeof data === 'object'){
            Object.keys(data).forEach(key =>{
                this.defineReactive(data, key, data[key]);
            })
        }
    }
    // 通过 object.defineProperty方法对对象属性进行劫持
    defineReactive(obj, key, value){
        // 递归观察
        this.observe(value);
        const dep = new Dep();
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: false,
            get(){
                //初始化
                if (Dep.target) {// 判断是否需要添加订阅者
                    dep.addWatcher(Dep.target); // 在这里添加一个订阅者
                }
                return value;
            },
            // 采用箭头函数在定义时绑定this的定义域
            set: (newVal)=>{
                if(newVal !== value){
                    console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
                    this.observe(newVal);
                    value = newVal;
                    dep.notify(); // 如果数据变化，通知所有订阅者
                }
            }
        })
    }
}

// Dep类存储watcher对象，并在数据变化时通知订阅者
class Dep{
    constructor(){
        this.watcherCollector = [];
    }
    // 添加watcher
    addWatcher(watcher){
        console.log('观察者', this.watcherCollector);
        this.watcherCollector.push(watcher);
    }
    // 数据变化时通知watcher更新
    notify(){
        this.watcherCollector.forEach(w=>w.update());
    }
}
实现Watcher
订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中，那该如何添加呢？
在监听器Observer的getter函数中执行添加订阅者Watcher的操作
只要在订阅者Watcher初始化的时候触发对应的getter函数去执行添加订阅者操作即可(只要获取对应的属性值就可以触发了)
只有在订阅者Watcher初始化的时候才需要添加订阅者，所以需要做一个判断操作，因此可以在订阅器上做一下手脚：在Dep.target上缓存下订阅者，添加成功后再将其去掉就可以了
订阅者Watcher的实现如下：
class Watcher{
    // 通过回调函数实现更新的数据通知到视图
    constructor(expr, vm, cb){
        this.expr = expr;
        this.vm = vm;
        this.cb = cb;
        this.oldVal = this.getOldVal();
    }
    // 获取旧数据
    getOldVal(){
        // 在利用getValue获取数据调用getter()方法时先把当前观察者挂载
        Dep.target = this;// 缓存自己
        const oldVal = compileUtil.getValue(this.expr, this.vm);
        // 挂载完毕需要注销，防止重复挂载 (数据一更新就会挂载)
        Dep.target = null;
        return oldVal;
    }
    // 通过回调函数更新数据
    update(){
        const newVal = compileUtil.getValue(this.expr, this.vm);
        if(newVal !== this.oldVal){
            this.cb(newVal);
        }
    }
}
至此，监听器-Observer、消息订阅器-Dep、订阅者-Watcher的实现，已经具备了监听数据和数据变化通知订阅者的功能。那么接下来就是实现Compile了。
实现Compile
指令解析器：解析模板指令，并替换模板数据，初始化视图
在编译工具中绑定Watcher：将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图，如图所示：
//Complier编译类设计

const compileUtil = {
    getValue(expr, vm){
        // 处理 person.name 这种对象类型，取出真正的value
        return expr.split('.').reduce((data,currentVal)=>{
            return data[currentVal];
        }, vm.$data)
    },
    setVal(expr, vm, inputValue){
        expr.split('.').reduce((data,currentVal)=>{
            data[currentVal] = inputValue;
        }, vm.$data)
    },
    text(node, expr, vm) {
        let value;
        if(expr.indexOf('{{')!==-1){
            value = expr.replace(/\{\{(.+?)\}\}/g, (...args)=>{
                 // text的 Watcher应在此绑定，因为是对插值{{}}进行双向绑定
                // Watcher的构造函数的 getOldVal()方法需要接受数据或者对象，而{{person.name}}不能接收
                new Watcher(args[1], vm, ()=>{
                    this.updater.textUpdater(node, this.getContent(expr, vm));
                });
                return this.getValue(args[1], vm);
            });
        }else{
            value = this.getValue(expr, vm);
        }
        this.updater.textUpdater(node, value);  
    },
    html(node, expr, vm) {
        const value = this.getValue(expr, vm);
         // html对应的 Watcher
        new Watcher(expr, vm, (newVal)=>{
            this.updater.htmlUpdater(node, newVal);
        })
        this.updater.htmlUpdater(node, value);
    },
    model(node, expr, vm) {
        const value = this.getValue(expr, vm);
        // v-model绑定对应的 Watcher, 数据驱动视图：数据=>视图
        new Watcher(expr, vm, (newVal)=>{
            this.updater.modelUpdater(node, newVal);
        })
         // 视图 => 数据 => 视图
        node.addEventListener('input', (e)=>{
            this.setVal(expr, vm, e.target.value);
        })
        this.updater.modelUpdater(node, value);
    },
    on(node, expr, vm, detailStr) {
        let fn = vm.$options.methods && vm.$options.methods[expr];
        node.addEventListener(detailStr,fn.bind(vm), false);
    },
    bind(node, expr, vm, detailStr){
        // v-on:href='...' => href='...'
        node.setAttribute(detailStr, expr);
    },
    // 视图更新函数
    updater: {
        textUpdater(node, value) {
            node.textContent = value;
        },
        htmlUpdater(node, value){
            node.innerHTML = value;
        },
        modelUpdater(node, value){
            node.value = value;
        }
    }

}

// 编译HTML模版对象
class Compiler {
    constructor(el, vm) {
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        this.vm = vm;
        // 1. 将预编译的元素节点放入文档碎片对象中，避免DOM频繁的回流与重绘，提高渲染性能
        const fragments = this.node2fragments(this.el);
        // 2. 编译模版
        this.compile(fragments);
        // 3. 追加子元素到根元素
        this.el.appendChild(fragments);
    }
    compile(fragments) {
        // 1.获取子节点
        const childNodes = fragments.childNodes;
        // 2.递归循环编译
        [...childNodes].forEach(child => {
            // 如果是元素节点
            if (this.isElementNode(child)) {
                this.compileElement(child);
            } else {
                // 文本节点
                this.compileText(child);
            }
            //递归遍历
            if(child.childNodes && child.childNodes.length){
                this.compile(child);
            }
        })
    }
    compileElement(node) {
        let attributes = node.attributes;
        // 对于每个属性进行遍历编译
        // attributes是类数组，因此需要先转数组
        [...attributes].forEach(attr => {
            let {name,value} = attr; // v-text="msg"  v-html=htmlStr  type="text"  v-model="msg"
            if (this.isDirector(name)) { // v-text  v-html  v-mode  v-bind  v-on:click v-bind:href=''
                let [, directive] = name.split('-');
                let [compileKey, detailStr] = directive.split(':');
                // 更新数据，数据驱动视图
                compileUtil[compileKey](node, value, this.vm, detailStr);
                // 删除有指令的标签属性 v-text v-html等，普通的value等原生html标签不必删除
                node.removeAttribute('v-' + directive);
            }else if(this.isEventName(name)){
                // 如果是事件处理 @click='handleClick'
                let [, detailStr] = name.split('@');
                compileUtil['on'](node, value, this.vm, detailStr);
                node.removeAttribute('@' + detailStr);
            }

        })

    }
    compileText(node) {
        // 编译文本中的{{person.name}}--{{person.age}}
        const content = node.textContent;
        if(/\{\{(.+?)\}\}/.test(content)){
            compileUtil['text'](node, content, this.vm);
        }
    }
    isEventName(attrName){
        // 判断是否@开头
        return attrName.startsWith('@');
    }
    isDirector(attrName) {
        // 判断是否为Vue特性标签
        return attrName.startsWith('v-');
    }
    node2fragments(el) {
        // 创建文档碎片对象
        const f = document.createDocumentFragment();
        let firstChild;
        while (firstChild = el.firstChild) {
            f.appendChild(firstChild);
        }
        return f;
    }
    isElementNode(node) {
        // 元素节点的nodeType属性为 1
        return node.nodeType === 1;
    }
}
MVue入口类设计
Mvue类接收一个参数对象作为初始输入，然后利用Compiler类对模版进行编译及渲染、创建观察者，观察数据。
class MVue {
    constructor(options) {
        // 初始元素与数据通过options对象绑定
        this.$el = options.el;
        this.$data = options.data;
        this.$options = options;
        // 通过Compiler对象对模版进行编译，例如{{}}插值、v-text、v-html、v-model等Vue语法
        if (this.$el) {
            // 1. 创建观察者，利用Observer对象对数据进行劫持
            new Observer(this.$data);
            // 2. 编译模版
            new Compiler(this.$el, this);
            // 3. 通过数据代理实现 this.person.name = '子非鱼-cool'功能，而不是this.$data.person.name = '子非鱼-cool'
            this.proxyData(this.$data);
        }
    }
     //用vm代理vm.$data
     proxyData(data){
        for(let key in data){
            Object.defineProperty(this,key,{
                get(){
                    return data[key];
                },
                set(newVal){
                    data[key] = newVal;
                }
            })
        }
    }
}
欢迎关注
初次见面，多多关照！
想了解更多前端技术，请关注我的公众号，如有问题或建议，请公众号留言！

一、computed的作用

计算属性将被混入到vue实例中，所有的getter和setter的this上下文自动的绑定为vue实例，computed适用于简单的运算，子模板中放入太多的逻辑会让模板过重且难以维护,如果为计算属性使用了箭头函数，则this不会指向这个组件的实例，

 

二、computed的使用场景

1、性能开销比较大的计算属性 A需要遍历一个巨大的数组并做大量的计算。当有其他的计算属性依赖于 A。如果没有缓存，将要多次执行 A 的 getter！而计算属性中的缓存可以很好的避免多次执行。

2、当一些数据需要随着其他数据变动而变动时

 

三、demo使用

<template>
  <div id="example">
</div>
</template>
<script>
import Vue from "vue";
// 实例一
var vm = new Vue({
  //new vue的作用是新建vue实例
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2;
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1;
      },
      set: function (v) {
        this.a = v - 1;
      },
    },
  },
});
console.log(vm.aDouble);  //2
console.log(vm.aPlus); // => 2
vm.aPlus = 4; //设定v=4
console.log(vm.a); // => 3
console.log(vm.aDouble); // => 6





export default {

};
</script>


 

 



 

 

实例二

<template>
  <div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>

// 示例二
export default {
  name: "computed",
  data() {
    return {
    message:'hello' 
    };
  },
  computed:{
      reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
};
</script>




四、computed的使用体验

1、computed中的值始终取决于原始data中的值，当data中的属性值发生变化的时候，computed中所依赖的值也会发生变化

2、computed中会有缓存，当data中的属性还没有发生变化，多次访问computed中的缓存值。

3、计算属性是基于它们的响应式依赖进行缓存的，只在相关依赖发生变化的时候才会重新计算（PS:方法和属性计算的结果相同，但是方法需要每次重新渲染时，调用方法总会再次执行函数）

4、计算属性默认只有getter，不过也可根据需要设置setter