7. What are the array methods encapsulated in Vue, and how to update the page
In Vue, Object.defineProperty is used to intercept data for responsive processing, and this method cannot monitor internal changes in the array, changes in the length of the array, changes in the interception of the array, etc., so these operations need to be hacked, so that Vue changes can be monitored.
So how does Vue realize the real-time update of these array methods? The following is the encapsulation of these methods in Vue:
To put it simply, the original methods in the array are rewritten. First, get the __ob__ of the array, which is its Observer object. If there is a new value, call observeArray to continue to observe the change of the new value (that is, The type of the array instance is changed by target__proto__ == arrayMethods), and then manually call notify to notify the rendering watcher and execute update.
8. After the value of a property in Vue data changes, will the view re-render immediately and synchronously?
Re-renders are not performed immediately and synchronously. Vue's implementation of responsiveness is not to change the DOM immediately after the data changes, but to update the DOM according to a certain strategy. Vue executes asynchronously when updating the DOM. As long as data changes are detected, Vue will open a queue and buffer all data changes that occur in the same event loop.
If the same watcher is triggered multiple times, it will only be pushed into the queue once. This deduplication while buffering is very important to avoid unnecessary calculations and DOM manipulations. Then, on the next event loop tick, Vue flushes the queue and performs the actual (deduplicated) work.
9. Briefly describe the coverage logic of mixin and extends
（1）mixin 和 extends
Both mixin and extends are used to merge and expand components, and both are merged through the mergeOptions method.
mixins accept an array of mixin objects, where mixin objects can contain instance options like normal instance objects, and these options will be merged into the final options. Mixin hooks are called in the order they are passed in, and are called before the component's own hooks are called.
extends is mainly for the convenience of extending single-file components, receiving an object or constructor.
(2) Execution process of mergeOptions
Normalization options ( normalizeProps , normalizelnject , normalizeDirectives )
Make judgments on unmerged options
10. Can child components directly change the data of the parent component?
Child components cannot directly change the data of the parent component. This is done primarily to maintain a one-way data flow between parent and child components. Every time the parent component is updated, all props in the child component will be refreshed with the latest values. If this is done, Vue will issue a warning in the browser's console. Vue advocates one-way data flow, that is, updates to parent props will flow to child components, but not the other way around. This is to prevent accidental changes to the state of the parent component, making the data flow of the application difficult to understand and causing confusion in the data flow. If the one-way data flow is broken, the cost of debugging will be very high when the application is complex.
Only one custom event can be dispatched through $emit, and after the parent component receives it, it will be modified by the parent component.