当前位置：网站首页>11_ Weather case - monitoring properties

11_ Weather case - monitoring properties

2022-07-26 23:52:00 【ID does not exist.】

Listening properties

Monitoring properties watch：

​ 1. When the monitored attribute changes , Callback function automatically calls , Carry out relevant operations

​ 2. The monitored property must exist to be monitored

​ 3. There are two ways to write surveillance ：

​ （1）new Vue Time passes in watch To configure

​ （2） adopt vm.$watch monitor 

<body>
	<div id="root">
        <h2> It's very... Today {
   {info}}</h2>
        <button @click="changeWeather"> Switch weather </button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
        },
        computed: {
            info() {
                return this.isHot ? ' scorching hot ' : ' cool '
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        // new Vue Time passes in watch To configure 
        watch:{
            isHot:{
                immediate:true,
                handler(oldValue,newValue){
                    console.log(oldValue,newValue);
                }
            }
        }
</script>

<div id="root">
        <h2> It's very... Today {
   {info}}</h2>
        <button @click="changeWeather"> Switch weather </button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
        },
        computed: {
            info() {
                return this.isHot ? ' scorching hot ' : ' cool '
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
    //  adopt vm.$watch monitor 
     vm.$watch('isHot', {
         immediate: true, // When initializing, let handler Call 
         //handler When to call ？ When isHot When there is a change .
         handler(newValue, oldValue) {
             console.log('isHot It was modified ', newValue, oldValue)
         }
    })
</script>

4. Deep surveillance ：

​ （1）Vue Medium watch By default, changes in internal values of objects are not monitored （ First floor ）

​ （2） To configure deep:true You can monitor changes in the internal values of objects （ Multi-storey ）

​ 5. remarks ：

​ （1）Vue It can monitor the change of the internal value of the object , but Vue Provided watch By default, you can't

​ （2） Use watch According to the specific structure of the data , Decide whether to use deep monitoring 

<body>
    <div id="root">
        <h2> It's very... Today {
   {info}}</h2>
        <button @click="changeWeather"> Switch weather </button>
        <hr />
        <h3>a The value of is :{
   {numbers.a}}</h3>
        <button @click="numbers.a++"> I'll let you know a+1</button>
        <h3>b The value of is :{
   {numbers.b}}</h3>
        <button @click="numbers.b++"> I'll let you know b+1</button>
        {
   {numbers.c.d.e}}
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1,
                c: {
                    d: {
                        e: 100
                    }
                }
            }
        },
        computed: {
            info() {
                return this.isHot ? ' scorching hot ' : ' cool '
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            isHot: {
                //handler When to call ？ When isHot When there is a change .
                handler(newValue, oldValue) {
                    console.log('isHot It was modified ', newValue, oldValue)
                }
            },
            // Monitor the changes of all attributes in the multi-level structure 
            numbers: {
                deep: true,
                handler() {
                    console.log('numbers Changed the ')
                }
            }
        }
    })
</script>

<body>
    <div id="root">
        <h2> It's very... Today {
   {info}}</h2>
        <button @click="changeWeather"> Switch weather </button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .

    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
        },
        computed: {
            info() {
                return this.isHot ? ' scorching hot ' : ' cool '
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            // Abbreviation 
            /* isHot(newValue,oldValue){
            	console.log('isHot It was modified ',newValue,oldValue,this)
            } */
        }
    })
	// Abbreviation 
    /* vm.$watch('isHot',(newValue,oldValue)=>{
    	console.log('isHot It was modified ',newValue,oldValue,this)
    }) */
</script>

6.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 You can do asynchronous operations

​ 7. Two principles ：

​ （1） All being Vue Management functions , It's best to write it as an ordinary function , such this Pointing is vm Or component instance object

​ （2） All are not Vue Management functions （ Timer callback function 、ajax Callback function, etc 、promise Callback function for ）, It's best to write it as an arrow function , such this The point is vm Or component instance object 

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

<script type="text/javascript">
    Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: ' Zhang ',
            lastName: ' 3、 ... and ',
            fullName: ' Zhang - 3、 ... and '
        },
        watch: {
            firstName(val) {
                setTimeout(() => {
                    console.log(this)
                    this.fullName = val + '-' + this.lastName
                }, 1000);
            },
            lastName(val) {
                this.fullName = this.firstName + '-' + val
            }
        }
    })
</script>
原网站

版权声明
本文为[ID does not exist.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207180947452915.html

边栏推荐

猜你喜欢

随机推荐