GitHub address, continue to add, star does not get lost.
- Differences and usage scenarios between computed attributes (computed), methods, and watch
- Understanding the Vue lifecycle
- Vue bidirectional binding, why can’t you change the subscript to notify the view of the change
- Describe the MVVM model in Vue
- The hash mode and history mode of Vue routes are different
- Vue routing
$route和$routerThe difference between
Differences and usage scenarios between computed attributes (computed), methods, and watch
Methods VS computes attributes
We can define the same function as a method instead of a calculated property. For the end result, the two approaches are indeed the same. The difference, however, is that computed attributes are cached based on their dependencies. A calculated property is reevaluated only if its associated dependencies change. This means that as long as the Message has not changed, multiple visits to the reversedMessage computed property will immediately return the previous computed result without having to execute the function again. In contrast, the method call always executes this function whenever a rerender occurs. In general, if recalculation is too expensive, please select calculation properties. If you do not want caching, please select Methods.
Watch VS calculate attributes
When you use complex logical expressions in templates, you should use computed properties.
The listening property is an object, the key is the expression to observe, and the value is the corresponding callback function. The value can also be a method name, or an object that contains options. You can use Watch when you have some data that needs to change as other data changes, or when you need to perform asynchronous or expensive operations when data changes.
Understanding the Vue lifecycle
How can you explain the vUE lifecycle to the satisfaction of the interviewer?
- beforeCreate
After instance initialization, data Observer and Event/Watcher events are called before configuration.
- created
Called immediately after the instance is created. In this step, the instance completes the configuration of data Observer, property and method operations, and Watch/Event event callbacks. However, the mount phase has not yet started and the $EL attribute is not currently visible.
- beforeMount
Called before the mount begins: The associated render function is called for the first time. This hook is not called during server-side rendering. The following cycles are not called during server-side rendering.
- mounted
El Specifies the newly created VM.
- beforeUpdate
Called when data is updated and occurs before the virtual DOM is patched. This is a good place to access the existing DOM before updating, such as manually removing event listeners that have been added.
- updated
This hook is called after the virtual DOM is re-rendered and patched due to data changes.
- activated
Called when the keep-alive component is activated.
- deactivated
Called when the keep-alive component is disabled.
- beforeDestroy
Called before instance destruction. At this step, the instance is still fully available.
- destroyed
Called after the Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed.
Vue bidirectional binding, why can’t you change the subscript to notify the view of the change?
Why can’t Vue detect array changes
Variation method:
Vue contains a set of mutating methods that observe arrays, so they will also trigger view updates. These methods are as follows: push(), pop(), shift(), unshift(), splice(), sort(), reverse()
Replace array:
Filter (), concat() and slice(). These do not change the original array, but always return a new array. When using the non-mutating method, we can replace the old array with the new one:
Matters needing attention:
Due to JavaScript limitations, Vue cannot detect the following altered arrays:
- When you set an item directly using an index, for example, vm.items[indexOfItem] = newValue
- When you modify the length of an array, for example, vm.items. Length = newLength
Workarounds:
- Vue.set(vm.items, indexOfItem, newValue)
- vm.items.splice(indexOfItem, 1, newValue)
Describe the MVVM model in Vue
A Vue is data-driven. The Vue itself binds the DOM to the data. Once the binding is created, the DOM and the data stay in sync and the DOM changes as the data changes.
The ViewModel is the heart of Vue and is an instance of Vue. A Vue instance acts on an HTML element, which can be a body or an element referred to by an ID. DOM Listeners and Data Bindings are the key to realize bidirectional Bindings. DOM Listeners monitor the changes of all View layer DOM elements on the page. When changes occur, data in the Model layer changes accordingly. Data Bindings listens to Model layer Data. When Data changes, DOM elements in View layer change accordingly.
The hash mode and history mode of Vue routes are different
Hash pattern
The hash appears in the URL but is not included in the HTTP request and has no impact at all on the back end, so changing the hash does not reload the page.
Features: Hash is in the URL, but is not included in the HTTP request. Used to direct browser action, hash does not reload the page.
The history mode
History leverages the new pushState() and replaceState() methods in the HTML5 History Interface. These two methods apply to the browser record stack and provide the ability to modify the history in addition to the existing back, Forward, and Go methods. It’s just that when they make changes that change the current URL, the browser doesn’t immediately send requests to the back end.
Principle:
The hash mode is based on the onHashChange event, which can be listened for on the Window object. History: Hashchange only changes code snippets following #, while the History API (pushState, replaceState, Go, back, Forward) gives the front end complete freedom by listening for popState() events on window objects.
Vue routing$route 和 $routerThe difference between
$route is the “routing information object”, including path, Params, Hash, Query, fullPath, matched, name and other routing information parameters. $router is a “router instance” object that includes hop methods, hook functions, etc.