vue中關於computed的一點理解

時間 2019-12-11

標籤 vue 關於 computed 一點 1點理解简体版

原文原文鏈接

computed至關於屬性的一個實時計算，若是實時計算裏關聯了對象，那麼當對象的某個值改變的時候，同事會出發實時計算。測試

例子：this

<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 = 50;
</script>

當vm.$data.childrens.age這個值改變的時候，動態觸發computed裏的age屬性計算，最後顯示到頁面的結果是：60。

相關標籤/搜索