- The difference between computed and watch
For Computed:
. It supports caching and will only be recalculated if the dependent data changes
Does not support asynchronous, when there are asynchronous operations in Computed, it is impossible to monitor data changes
Computed values will be cached by default, and computed properties are cached based on their responsive dependencies, that is, calculated based on the data declared in data or the data in props passed by the blue parent component.
·If an attribute is calculated by other attributes, this attribute depends on other attributes, usually computed will be used. If the attribute value of the computed attribute is a function, then the get method is used by default, and the return value of the function is the attribute value of the attribute ;In computed, the attribute has a get method and a set method, when the data changes, the set method will be called
For Watches:
. It does not support caching, when the data changes, it will trigger the corresponding operation
·Support asynchronous monitoring
The monitoring function receives two parameters, the first parameter is the latest value, and the second is the value before the change
. When an attribute changes, you need to perform the corresponding operation
, the monitoring data must be the data declared in the data or the data in the props passed by the parent component. When there is a change, other operations will be triggered. The function has two parameters:
immediate: The callback function is triggered immediately when the component loads
deep: In-depth monitoring to discover internal changes in data, used in complex data types, such as changes in objects in an array. It should be noted that deep cannot monitor changes inside arrays and objects
Watches are needed when you want to perform asynchronous or expensive operations in response to constant changes.
Summarize:
computed computed attribute: depends on other attribute values, and the value of computed is cached, only when the value of the attribute it depends on changes, the value of computed will be recalculated the next time the value of computed is obtained. watch listener: It is more of an observation function, no caching, similar to the monitoring callback of some data, whenever the monitored data changes, the callback will be executed for subsequent operations.
Application scenario:
When you need to perform numerical calculations and depend on other data, you should use computed, because you can use the cache feature of computed to avoid recalculation every time you get a value.
When you need to perform asynchronous or expensive operations when data changes, you should use watch, use the watch option to allow asynchronous operations (access an API), limit the frequency of execution of the operation, and set the intermediate state before getting the final result . These are things that computed properties cannot do.
2. What is a slot? What is its function? What is its principle?
Slot, also known as slot, is the content distribution mechanism of Vue. The template engine inside the component uses the slot element as the outlet for carrying and distributing content. The slot slot embodies a template label element of the component, and whether and how to display this label element is determined by the parent component. There are three types of slots, default slots, named slots and scoped slots.
·Default slot: Also known as anonymous slot, when the slot does not specify a name value, a slot is displayed by default, and there is only one anonymous slot in a component.
·Named slot: a slot with a specific name, that is, a slot with a name attribute, a component can have multiple named slots ·Scoped slot: a default slot, a variant of a named slot, which can be It is an anonymous slot or a named slot. The difference of this slot is that when the child component renders the scope slot, the data inside the child component can be passed to the parent component, and the parent component can pass it according to the child component. The data determines how to render the slot.
Implementation principle: When the child component vm is instantiated, the content of the slot tag passed in by the parent component is obtained and stored in msslot. The default slot is m.Sslot.default, the named slot is m.$slotxxx, and xxx is the slot Slot name, when the component executes the dye function, it encounters the slot label and replaces it with the content in $slot. At this time, data can be passed to the slot. If there is data, the slot can be called a scoped slot.
3. The role of the filter, how to implement a filter
According to the name of the filter, the filter is used to filter the data. In Vue, filters are used to filter the data. The filters do not modify the data but filter the data, changing the output that the user sees (calculated attribute computed, method methods are all passed modify data to handle the output display of the data format).
scenes to be used:
. When formatting data is required, such as the need to process the output/display of data formats such as time and price. For example, the backend returns a date string of year, month, day, and the frontend needs to display the data format of how many days ago. At this time, you can use fliters Filters to process data.