This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

Vue provides a more general way to respond to changes in data through the Watch option. This approach is most useful when asynchronous or expensive operations need to be performed as data changes.

First, the basic use of listeners

<div id="demo">{{ fullName }}</div>
Copy the code
var vm = new Vue({
el: '#demo'.data: { 
    firstName: 'Foo'.lastName: 'Bar'.fullName: 'Foo Bar' }, 
watch: { 
    firstName: function (val) { 
        this.fullName = val + ' ' + this.lastName }, 
    lastName: function (val) { 
        this.fullName = this.firstName + ' ' + val } } })
Copy the code

This code listens for firstName and fullName, and changes the fullName value when they change.

The format of the listener

  1. Method format listeners
    • Disadvantage 1: can not be automatically triggered when just entering the page!
    • Disadvantage 2: If you are listening on an object, if a property in a property changes, the listener will not be triggered!
  2. Object format
    • Benefit 1: can realize just enter the page, automatically trigger!
    • Benefit 2: you can implement deep listening, that is, listening for changes in the properties of the object!

Three, the realization of just entered the page to trigger listening and deep listening

Triggers listening as soon as the page is entered

This is done by adding the immediate option

const vm = new Vue({
    el: '#app'.data: {
        info: {
            username: 'admin'}},watch: {info: {handle(newVal){
                console.log(newVal)
            },
            // Implement listening as soon as the page is entered
            immediate: true}}})Copy the code

The depth of the listening

In the above code, when the username changes, we cannot successfully listen, because the change is the value of the object property, so we need to deep listen, add the option of “deep”

const vm = new Vue({
    el: '#app'.data: {
        info: {
            username: 'admin'}},watch: {info: {handle(newVal){
                console.log(newVal)
            },
            // Implement listening as soon as the page is entered
            immediate: true.// Implement deep listening, which triggers "object listening" whenever any property of an object changes.
            deep: true}}})Copy the code

Deep listening returns the value of the child property of the listening object

If you want to print the value of username, you need to add newval.username to it. You can actually listen for and print the value of the variable, you just need to put a single quotation mark around it.

const vm = new Vue({
    el: '#app'.data: {
        info: {
            username: 'admin'}},watch: {'info.username': {
            handle(newVal){
                console.log(newVal)
            }
        }
    }
})
Copy the code

The last

⚽ This article introduces the basic use of Vue listeners and how to implement deep listening, hope you have a certain harvest after reading ~ ⚾ if this article is helpful to you, please click the “πŸ€” ~ πŸ€GitHub blog: github.com/Awu1227. πŸ‰ I have other columns, welcome to read ~ 🏐 Playing with THE Beauty of CSS 🎳 Simple JavaScript