JZTXT

4.15 vue中watch computed

发布时间 2023-04-04 11:29:15作者: 盘思动

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

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

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

<!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:''
          }
        },
        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>