watch 與 computed

有三個輸出框，第三個輸出框的值等於第一個輸出口的值加上第二個輸出框的值（這裏是字符串相加）。
若是你在 data 中寫 fullName: this.firstName + this.lastName 顯然是不行的。

使用 computed 實現單向數據啊綁定

<div id="app">
    <input type="text" placeholder="firstName" v-model="firstName"><br>
    <input type="text" placeholder="lastName" v-model="lastName"><br>
    <input type="text" v-model="fullName"><br>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B'
        },
        computed: {
            fullName () {
                return this.firstName + this.lastName;
            }
        }
    })
</script>

此時咱們就須要用到計算屬性，當 firstName 和 lastName 的值發生改變時計算屬性 fullName() 就會執行一次，fullName 的值就會更新（初始化的時候也會執行一次）。

computed 實現雙向數據綁定

<div id="app">
    <input type="text" placeholder="firstName" v-model="firstName"><br>
    <input type="text" placeholder="lastName" v-model="lastName"><br>
    <input type="text" v-model="fullName"><br>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B'
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + ' ' + this.lastName;
                },
                set(value) {
                    const names = value.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    })
</script>

get 用來獲取 fullName 的值，
set 用來監視 fullName 的值。

watch 實現單向數據綁定

<div id="app">
    <input type="text" placeholder="firstName" v-model="firstName"><br>
    <input type="text" placeholder="lastName" v-model="lastName"><br>
    <input type="text" v-model="fullName"><br>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName: ''
        },
        watch: {
            firstName (newValue, oldValue) {
                this.fullName = newValue + this.lastName;
            },
            lastName (newValue, oldValue) {
                this.fullName = this.firstName + newValue;
            }
        }
    })
</script>

使用 watch 就須要監視 firstName 和 lastName 兩個值了，只有當 firstName 和 lastName 的值發生改變的時候，fullName的值纔會變化。

最後寫一個 computed 的作搜索的用例

computed 的難在於你不知道什麼時候使用計算屬性，因此下面寫一個用例

<div id="app">
    <input type="text" placeholder="請輸出姓名" v-model="searchName">
    <ul>
        <li v-for="(item, index) in searchList" :key="index">{{item.name}}---{{item.age}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            list: [
                {name: '王五', age: 16},
                {name: '李四', age: 17},
                {name: '王五', age: 18},
                {name: '李四', age: 23},
                {name: '王五', age: 22},
                {name: '張三', age: 17}
            ],
            searchName: ''
        },
        computed: {
            searchList () {
                return this.list.filter(p => p.name.indexOf(this.searchName) !== -1)
            }
        }
    })
</script>

當 程序初始化和 searchName 發送變化時，searchList 計算屬性就會執行，更新列表。

string.indexOf(str, num) 返回str 中 string 中首次出現的位置， num 是可選參數，指定從哪一個地方開始檢索。