watch 和 computed 的区别

computed：计算属性

1. 计算属性是由data中的已知值，得到的一个新值。
2. 这个新值只会根据已知值的变化而变化，其他不相关的数据的变化不会影响该新值。
3. 计算属性不在data中，计算属性新值的相关已知值在data中。
4. 别人变化影响我自己。

watch：监听数据的变化

1. 监听data中数据的变化
2. 监听的数据就是data中的已知值
3. 我的变化影响别人

 

2、使用场景

computed 　　　　

　　　　当一个属性受多个属性影响的时候就需要用到computed

　　　　最典型的例子： 购物车商品结算的时候

watch

　　　　当一条数据影响多条数据的时候就需要用watch

　　　　搜索数据

 

献上demo

<div id="app">
    <input type="text" v-model="name" />
    <span v-show="isShow">请输入3-6个字符</span>
    <br />
    <input type="text" v-model="todoName" />
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            name: "zs",
            todoName: "ls"
        },
        computed: {
            isShow() {
                //当this.name的长度小于3或者大于6时显示提示内容(我根据name的变化而变化)
                if (this.name.length >= 3 && this.name.length <= 6) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        watch: {
            //监听data中的name,如果发生了变化,就把变化的值给data中的todoName(我影响了别人)
            name(newVal) {
                this.todoName = newVal;
            }
        }
    });
</script>