Advantages of vue
Lightweight framework: only focus on the view layer, which is a collection of views for building data, with a size of only tens of kb;
Easy to learn : Chinese development, Chinese documents, no language barriers, easy to understand and learn;
Two-way data binding: retains the characteristics of angular, and is simpler in data manipulation;
Componentization : retains the advantages of react, realizes the encapsulation and reuse of html, and has unique advantages in building single-page applications;
Separation of view, data, and structure : make data changes easier, without modifying logic codes, and only need to operate data to complete related operations;
Virtual DOM : DOM operation is very performance-intensive, no longer using the native DOM operation node, which greatly liberates DOM operation, but the specific operation is still DOM, but it is another way;
Faster running speed: Compared with react, it also operates virtual dom. In terms of performance, vue has great advantages.
Please elaborate on your understanding of the vue life cycle?
A total of 8 stages are divided into before/after creation, before/after loading, before/after update, and before/after destruction.
Before/after creation: In the beforeCreate stage, both the mount element el and the data object data of the vue instance are undefined and have not been initialized. In the created stage, the data object data of the vue instance is available, and el is undefined and has not yet been initialized .
Before/after loading: In the beforeMount stage, the $el and data of the vue instance are initialized, but they are still virtual dom nodes before mounting , and data.message has not been replaced. In the mounted phase, the vue instance is mounted and data.message is rendered successfully.
Before/after update: when the data changes, the beforeUpdate and updated methods will be triggered
Before/after destruction: After the destroy method is executed, the change to data will not trigger the periodic function, indicating that the vue instance has released the event monitoring and binding with dom at this time, but the dom structure still exists
What is the difference between v-if and v-show in vue?
v-if and v-show seem similar. When the condition is not true, the corresponding label elements are not visible, but there are differences between these two options:
1. When the condition is switched, v-if will properly create and destroy the label, while v-show is only loaded once during initialization, so the overhead of v-if will be relatively larger than that of v-show.
2. v-if is lazy, the label will be rendered only when the condition is true; if the initial condition is not true, v-if will not render the label. v-show will render the label no matter whether the initial condition is true or not. It only does a simple CSS switch.
The difference between computed and watch
Computed property computed:
- Support caching, only when the dependent data changes, the calculation will be recalculated
- Does not support asynchronous , invalid when there are asynchronous operations in computed, unable to monitor data changes
- Computed attribute values will be cached by default . Computed attributes are cached based on their responsive dependencies, that is, calculated values based on data declared in data or passed by parent components in props
- If an attribute is calculated by other attributes, this attribute depends on other attributes, it is a many-to-one or one-to-one, generally computed
- If the computed attribute value is a function, then the get method will be used by default; the return value of the function is the attribute value of the attribute; in computed, the attribute has a get and a set method, and when the data changes, the set method is called.
Listening attribute watch:
- Caching is not supported, and data changes will directly trigger corresponding operations ;
- watch supports asynchronous;
- The monitored function receives two parameters, the first parameter is the latest value; the second parameter is the value before input;
- When an attribute changes, the corresponding operation needs to be performed; one-to-many;
- The monitoring data must be the data declared in the data or the data in the props passed by the parent component . When the data changes, other operations are triggered. The function has two parameters:
immediate: component loading immediately triggers the execution of the callback function
watch: { firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, //代表在wacth里声明了firstName这个方法之后立即执行handler方法immediate: true }}copy code
deep: deep means in-depth observation, the listener will traverse down layer by layer, and add this listener to all properties of the object, but this will cause a very high performance overhead, any modification of any property in obj will cause Trigger the handler in this listener
watch: {obj: {handler(newName, oldName)
{console.log('obj.a changed'); }, immediate: true, deep: true }}copy codeOptimization: We can monitor in the form of a string
watch: { 'obj.a': { handler(newName, oldName)
{console.log('obj.a changed'); },immediate: true, // deep: true }}copy codeIn this way, Vue.js will parse layer by layer until it encounters attribute a, and then set a listening function for a.