4.15 vue中watch computed

在 Vue.js 中，computed 是一种计算属性，它能够根据依赖的数据动态计算出一个新的值。
computed 属性可以定义为一个函数，该函数返回需要计算的值。
当它所依赖的数据发生变化时，Vue.js 会自动重新计算这个值并将其更新到组件上。

computed 与watch，methods的区别

与 computed 对应的还有另外两种常见的属性，分别是 methods 和 watch。
其中，methods 可以定义一些计算逻辑，但它们返回的值不能缓存，每次都会重新计算；
而 watch 则用于监听某个数据的变化并执行一些操作，但它不能返回数据值。

computed 属性还可以通过 get 和 set 方法来实现对计算属性的输入输出控制。
get 方法表示当访问计算属性时要执行的代码，
set 方法则表示当给计算属性赋值时要执行的代码

demo1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>computed set get</title>
    </head>
    <body>
        <!--View-->
        <div id="box">
          <input v-model="fullInputName" />
          <div>{{fullName}}</div>  
        </div>
    </body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
    //Model
    const user = {
        data(){
          return{
            firstName: "Jack",
            lastName: "Jobs",  //乔布斯
            fullInputName:''//---这里如果直接定义fullName会覆盖computed中的get方法
          }
        },
        computed: {
            fullName: {
                get(){
                    console.log('get called...');
                    return this.firstName + " " + this.lastName;
                },
                set(value) {
                    console.log("set called.");
                    var arr = value.split(" ");
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
            }
        },
        watch:{
            fullInputName(value){
                console.log('----watch');
                this.fullName = value;
            }
        }
    }

    //ViewModel
    const app = Vue.createApp(user);     
    const rc = app.mount("#box");  
</script>
</html>

demo2

<template>
    
    <div>
        <h2>test</h2>

        <input type="text" v-model="fullInputName" />
        <div>{{fullName}}</div>
    </div>

</template>
<script>
export default {
    data(){
        return {
            firstName:'张',
            lastName:'三',
            fullInputName:""
        }
    },
    created(){
        console.log('test-created');
    },
    methods:{

    },
    computed:{
        fullName:{
            get(){// 上面页面渲染,{{fullName}} 会调取这里get方法
                console.log('调用 fullName get方法');
                return this.firstName + " " + this.lastName;
            },
            set(value){
                console.log("调用 fullName set方法");
                var arr = value.split(" ");
                this.firstName = arr[0] ? arr[0] : '';
                this.lastName = arr[1] ? arr[1] : '';
            }
        }
    },
    watch:{
        fullInputName(value){
            this.fullName = value;// fullName改变会调取computed，fullName,set方法
        }
    }
}
</script>
<style scoped>
    
</style>

demo3

<template>
    
    <div>
        <h2>test</h2>

        <p>商品价格:{{price}} 元</p>
        <p>商品折扣:{{discount}}</p>
        <p>折后价格:{{lastPrice}}</p>

    </div>

</template>
<script>
export default {
    data(){
        return {
            price:20.00,
            rate:0.8
        }
    },
    created(){
        console.log('test-created');
        setInterval(() => {
            this.chgPrice();
        },5000)
    },
    methods:{
        chgPrice(){
            this.price++;
        }
    },
    computed:{// computed中方法，页面直接渲染可以使用;
        discount:{// 有set和没有set这里格式不同;
            get(){
                return this.rate * 10 + " 折";
            },
            set(){

            }
        },
        lastPrice(){
            return (this.price *  this.rate).toFixed(2);
        }
    },
    watch:{

    }
}
</script>
<style scoped>
    
</style>
posted @ 2023-04-04 11:22  盘思动  阅读(16)  评论(0)  编辑  收藏  举报