1. Is the member dynamically added to data when we click the button responsive data? If not, how do we set the new member to responsive data? What is the internal mechanism

    let vm = new Vue({ el: ‘#el’ data: { o: ‘object’, dog: { name: ” } }, method: {clickHandler () {// If the name attribute is responsive this.dog.name = ‘Trump’}}})

  2. The name attribute is not reactive

  3. Because Vue cannot detect the addition or removal of property. Since Vue performs getter/setter conversions on property when it initializes the instance, the property must exist on the data object for Vue to convert it to reactive

  4. Set the name property in data’s dog object

A setter for a vm[key] will trigger a setter for data[key], which will walk the new value. The dog of data in the title is an empty object without any attributes. Therefore, when initializing the Vue instance, there are no getter and setter methods for any attributes when setting proxy for dog. Therefore, the name attribute is dynamically added to dog after clicking the button. The setter method for the property name in the dog object will not be triggered when the value is set, so it is not reactive data. After adding the initial value of name to the dog object, the name property of the dog object has getter and setter methods, so it can be reactive.