当前位置：网站首页>Computed and watch listening properties

Computed and watch listening properties

2022-07-25 23:12:00 【Dignified 304】

Compute properties computed and watch Listening properties

computed Use of calculation properties

<body>
    <div class="box">
         surname : <input type="text" v-model="firstName"><br><br>
         name : <input type="text" v-model="lastName"><br><br>
         full name ：<span>{
   {fullName}}</span><br>
    </div>
</body>


<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '.box',
        data: {
            firstName: ' Zhang ',
            lastName: ' 3、 ... and '
        },
        //  Compute properties 
        computed: {
            fullName: {
                //  When someone reads fullName when ,get Will be called and the return value will be taken as fullName
                // 1. First read fullName when ,2. When the dependent data changes , Auto read getter Then receive the return value to fullName   
                get() {
                    //  Here this yes vm
                    //console.log(this);
                    return this.firstName + '-' + this.lastName;
                },
                // value yes fullName Modified value    
                set(value) {
                    //value.split('-')  hold value The string in is in the form of - Convert the delimiter to a new array 
                    let arr = value.split('-');
                    // Deconstruct assignment 
                    [this.firstName, this.lastName] = arr;
                }
            }
        }
    })
</script>

In code fullName It's a computational property , It needs to use firstName and lastName Value

When there is access in the template code fullName attribute , Will execute getter, The return value is returned to fullName

When fullName It will be executed when it is modified set function

If you don't think about setter

It can be abbreviated

computed: {
            fullName() {
                return this.firstName + '-' + this.lastName;
            }
        }

watch Listening properties

Don't say anything, it's all in the code

<body>
    <!--
         Monitoring properties watch
            1. When the monitored attribute changes , Callback function （handler） Automatic execution , Carry out relevant operations 
            2. Monitored properties must exist , Can be monitored 
            3. There are two ways to write surveillance ：
                (1) new Vue Time passes in watch To configure 
                (2)  adopt vm.$watch monitor 
    -->
    <!-- 
         Deep surveillance ：
            1. Vue Medium watch By default, changes within objects are not monitored （ It monitors the address of the object ）
            2. To configure deep：true   Then you can monitor multiple levels 
         remarks ：
            1. Vue It can monitor the changes of internal values of objects , But the offer watch The default is not to monitor 
            2.  Use watch According to the specific structure of the data , Decide whether to use deep monitoring 
     -->
    <div class="box">
        <h3> The weather today {
   {info}}</h3>
        <!-- <button @click="isHot = !isHot;"> Switch weather </button> -->
        <button @click="changeWeather"> Switch weather </button>
        <h3>a The value of is {
   {numbers.a}}</h3>
        <h3>a The value of is {
   {numbers.b}}</h3>
        <button @click="numbers.a++"> I'll let you know a+1</button>
        <button @click="numbers.b++"> I'll let you know b+1</button>
    </div>
</body>

<script>
    Vue.config.productionTip = false;
    //  Create examples 
    new Vue({
        el: '.box',
        // data data 
        data: {
            isHot: true,
            numbers: {
                a: 0,
                b: 0
            }
        },

        // computed Compute properties 
        computed: {
            //  Access in template code info, The execution function returns a value to the template code 
            info() {
                return this.isHot ? ' It's hot ' : ' commonly ';
            }
        },
        // methods Method 
        methods: {
            //  Bind the button of the click event to call this function 
            changeWeather() {
                //  Take the opposite 
                this.isHot = !this.isHot;
            }
        },
        //  Monitoring properties 
        watch: {
            // 'isHot'   It was originally written like this , Without quotation marks is shorthand 
            'isHot': {
                immediate: true,// When initializing, let handler Call 
                // handler There are two parameters   One is the value of change , An original value 
                handler(newValue, oldValue) {
                    console.log('isHot It was modified ', newValue, oldValue);
                }
            },
            info: {
                immediate: true,// When initializing, let handler Call 
                handler(newValue, oldValue) {
                    console.log('info It was modified ', newValue, oldValue);
                }
            },
            //  monitor numbers As long as one of the attributes in changes, there must be a response 
            numbers: {
                deep: true,// Turn on multi-level monitoring 
                immediate: true,// Call once immediately after the page is loaded 
                handler(newValue, oldValue) {
                    console.log('numbers Has been changed ');
                }

            }
        }
    });
    // The instance 
    // vm.$watch();
</script>

computed and watch The difference between

1.computed What can be done ,watch All can be done

2.watch What can be done ,computed It doesn't have to be done , for example watch Can operate asynchronously

Two important little principles

1. By Vue Management functions , It's best to write it as an ordinary function , such this To point to vm Or instance object

2. All are not Vue The function of management is best written as arrow function （ Timer Functions ,ajax Callback function for ,Promise Callback function for ） It's better to write it as an arrow function this To point to vm Or instance object

原网站

版权声明
本文为[Dignified 304]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190504025097.html