Vue中的computed 解读

  computed相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算。比如:

  

<body id="content">
    <parent :childrens="childrens"></parent>
</body>
<!-- 这个测试主要想证明: 对于计算属性里如果关联对象,即使对象不是组件作用域内的,当对象在外部改变了某个属性,同样会出发计算属性的方法-->
<script>
    var parent = Vue.extend( {
        props: {
            childrens: ''
        },
        template: '<div >{{age}}</div>',
        data: function() {
            return {
                name: '',
                age: 18
            };
        },
        computed: {
            age: function() {
                return this.childrens.age +10;
            }
        },
        created: function() {
            var _parent = this.$parent;
            this._set = {};
            this._set = _parent; 
        }
    } );
    var vm = new Vue( {
        el: 'body',
        data: {
            childrens: {
                name: '小强',
                age: 20,
                sex: '男'
            }
        },
        components: {
            'parent': parent
        }
    } );
    vm.$data.childrens.age = 10;
</script>

 当vm.$data.childrens.age这个值改变的时候,动态触发computed里的age属性计算,最后显示到页面的结果是:20。

posted @ 2017-02-04 16:00  方式代码  阅读(6694)  评论(1编辑  收藏  举报