vue中computed、method和watch的區別？

時間 2019-12-15

標籤 vue computed method watch 區別简体版

原文原文鏈接

computed能夠讓咱們很好的監聽多個數據或者一個數據來維護返回一個狀態值，只要其中一個或多個數據發生變化，則會從新計算整個函數體vue

相比Vue中的方法而言，性能更佳。git

但Vue中的計算屬性都是同步的，若是須要異步咱們得依賴於vue-async-computed。github

雖然計算屬性在大多數狀況下更合適，但有時候也須要一個自定義的watcher。這是爲何Vue經過watch選項提供一個更通用的方法，來響應數據的變化。當你想要在數據變化響應時，執行異步操做或開銷較大的操做，這是頗有用的。異步

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

<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。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。