Vue：入門3（計算屬性和偵聽器）

計算屬性：不建議在{{}}中做過多的邏輯

方法1：使用計算屬性

<!--
下面的例子結果是：
Original message: "Goodbye"
Computed reversed message: "eybdooG"
-->
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message:'Hello'
        },
        computed: {
            reversedMessage: function(){
                //這裏會對message的值進行倒置，並返回給reversedMessage
                return this.message.split('').reverse().join('');
            }
        }
    });
    console.log(vm.message);// Hello
    vm.message = 'Goodbye';
    //這裏vm.reversedMessage函數裏的變量this.message已經在前面被修改了所以函數裏也會用新的值
    console.log(vm.reversedMessage);// eybdooG
</script>

方法2：通過方法/函數

<!--
結果：
Original message: "Hello"
Computed reversed message: "olleH"
-->
<div id="example2">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage() }}"</p>
</div>
<script>
    var vm2 = new Vue({
        el: '#example2',
        data: {
            message:'Hello'
        },
        methods: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('');
            }
        }
    });
</script>

注意：計算屬性是基於它們的響應式依賴進行緩存的.只在相關響應式依賴發生改變時它們纔會重新求值
Date.now() 不是響應式依賴.在控制檯調用console.log(vm3.now)是不會刷新的
相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數.

<span id="id1">計算屬性：{{now}}</span><br>
<span id="id2">方法：{{now2()}}</span>
<script>
    var vm3 = new Vue({
        el: '#id1',
        computed: {
            now: function () {
                return Date.now();
            }
        }
    });
    var vm4 = new Vue({
        el: '#id2',
        methods: {
            now2: function (){
                return Date.now();
            }
        }
    });
</script>

比起使用watch回調，更推薦使用計算屬性

<div id="id3">{{fullName}}</div>
<div id="id4">{{fullName2}}</div>
<div id="id5">{{fullName3}}</div>
<script>
    var vm5 = new Vue({
        el: '#id3',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        //會在對應屬性被調用的時候調用。下面的邏輯簡單說就是在firstName或lastName改變的時候重新生成新的名字
        watch: {
            firstName: function (val) {
                this.fullName = val +' '+ this.lastName;
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' +val
            }
        }
    });

    // 使用計算屬性實現上面的功能
    var vm6 = new Vue({
        el : '#id4',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        },
        computed: {
            fullName2: function () {
                return this.firstName + ' ' + this.lastName;
            }
        }
    });

    var vm7 = new Vue({
        el : '#id5',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        },
        computed: {
            fullName3: {
                get: function () {
                    console.log('get');
                    return this.firstName + ' ' + this.lastName;
                },
                // 會在fullName3被設置的時候調用
                set: function(newValue){
                    //這裏又會觸發上面的get
                    this.firstName = newValue;
                    this.lastName = newValue;
                }
            }
        }
    });

</script>

watch的使用,在元素改變的時候會觸發

<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{ answer }}</p>
</div>
<!--這是個ajax庫-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script>
    var watchExampleVm = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: ''
        },
        watch: {
            question: function (newVal,oldVal) {
                this.answer = 'Waiting for you to stop typing...';
                this.debouncedGetAnswer();
            }
        },
        // 定義了一個函數debouncedGetAnswer，在上面調用
        created:function () {
            // 調用getAnswer
            this.debouncedGetAnswer = this.getAnswer;
        },
        methods: {
            getAnswer: function () {
                var vm = this;
                // 異步請求對應地址並返回結果
                axios.get('https://yesno.wtf/api')
                    .then(function (response) {
                        vm.answer = response.data.answer;
                    })
                    .catch(function (error) {
                        vm.answer = 'Error! Could not reach the API. ' + error
                    })
            }
        }
    });
</script>

歡迎關注，會同步更新，隨時隨地一起學習
微信公衆號：教練我想學PHP
天天快報、騰訊新聞和QQ瀏覽器：教練我想學PHP