vue中关于computed的理解及其其他扩展computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么当

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <parent :childrens="childrens" ></parent>
</div>

<script type="text/javascript">
    var parent = Vue.extend({
        props: {
            childrens: ""
        },
        template: '<div><div>{{age}}</div><div>{{name}}</div></div>',
        data: function () {
            return {
                name: '',
                age: 18
            }
        },
        computed: {
            age: function () {
                return this.childrens.age + 10;
            },
            name: function () {
                return this.childrens.name + "haha";
            }
        }, 
        created: function () {
            var _parent = this.$parent;
            this._set = {};
            this._set = _parent;
            console.log(this._set);
        }
    })

    var app = new Vue({
        el: '#app',
        data: {
            childrens : {
                name: "小强",
                age: 20,
                sex: "男"
            } 
        },
        components: {
            parent, 
        },
    })
</script>
</body>
</html>

打开开发者选项

然后输入代码

app.$data.childrens.age = 60


app.$data.childrens.name = "大强"

另外：当你的模板template这样写的时候会报错：

百度可知：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
原来vue模板只能有一个根对象；所以想要正常显示效果，你的用一个div或者别的标签来包裹全部的元素;正常写法见第一段代码