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 是可选参数，指定从哪个地方开始检索。