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>

 

©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页