What should you pay attention to when using vue.js
王林
Release： 2021-01-07 17:31:59
Original
9604 people have browsed it
Things to note when using vue.js: 1. Filters are mainly used for simple text conversion; 2. The difference between computed and methods; 3. The use of keys; 4. The use of arrays; 5. The use of components ; 6. Component communication.
The environment of this article: windows10, vue2.9, Dell G3 computer.
You need to pay attention to the following issues when using vue.js:
1. Filters are mainly used for simple For text conversion, if you want to implement complex data transformation, you should use calculated attributes
2, use of instructions
v-bind is basically used for attributes on HTML elements , such as id, class, href, src, etc.
v-on is used to bind event listeners, such as click, dblclick, keyup, mousemove, etc. This in the method points to The current Vue instance
v-show cannot be used on template
##- v-if and v-show usage scenarios
v-if If the condition is false, the rendering element will not be compiled. v-show is just a simple CSS property switch, it will compile regardless of true/false. v-if is suitable for scenarios where conditions do not change frequently v-show is suitable for frequent switching conditions
3. The difference between computed and methods
methods are Parentheses (), computed without parentheses.
computed is based on its dependency cache, and will only be re-validated when the relevant dependencies change.
methods When re-rendering, the function will always be re-called and executed.
4. Use of keys
When Vue renders elements, considering efficiency, existing elements will be reused as much as possible. At this time, you need to add the key attribute to the reused element
Copy after login
5. The use of array
##filter(), concat(), slice() will not change The original array will return a new array
Replace the original array with the new array, without any performance impact. When Vue renders, it will try to reuse DOM elements
Some array changes cannot be detected by Vue, and the view will be updated
app.books[3]={}app .books.length=1 The above situations can be handled using Vue.set and app.books.splice(1) respectively
