Vue base _V -for update monitoring
Formula:
Array change method, it causes v-for update, page update
This.$set() does not cause a v-for update.
<template> <div> <ul> <li v-for="(val, Index) in arr" :key="index"> {{val}} </li> </ul> < button@click ="revBtn" @click="sliceBtn"> </button> <button @click="updateBtn"> </button> </div> </template> <script> export default { data(){ return { arr: [5, 3, 9, 2, 1] } }, methods: { revBtn(){ // 1. Array flipping allows V-for to update this.arr.reverse()}, sliceBtn(){// 2. Slice (0, 3) lets newArr = this.arr. Slice (0, 3) lets newArr = this.arr. Slice (0, 3) 3) this.arr = newArr }, updateBtn(){ // 3. // this. Arr [0] = 1000; This.$set(this.arr, 0, 1000)}}} </script> <style> </style>Copy the code
These methods trigger array changes, and V-for detects and updates the page
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
These methods do not trigger v-for updates
slice()
filter()
concat()
Note: Vue cannot detect the array assignment and update, use vue.set () or this.$set() if necessary, or overwrite the entire array
Conclusion: The v-for is updated only by changing the original array method
Vue base _V -for updates in place
From the change node, it changes in order
This DOM comparison can improve performance – but not by enough
Ready to code
<template> <div> <ul> <li v-for="(val, Ind) in arr" :key="ind"> {{val}} </li> </ul> <button @click=" BTN "> Export default {data(){return {arr: [' old ', 'old ',' old three ']}}, methods: {{BTN () this. Arr. Splice (1, 0, 'new')}}} < / script > < style > < / style >Copy the code
Vue Basic _key function
None key – Local update
V-for does not move the DOM. Instead, it tries to reuse and update the DOM in place. If v-for moves the DOM, you need to use a special attribute key to provide a sorting cue
<ul id="myUL"> <li v-for="str in arr"> {{ str }} <input type="text"> </li> </ul> <button @click="addFn"> </button>Copy the code
Export default {data(){return {arr: [" old ", "new "," old ", "old three "]}}, methods: {addFn(){this.arr.splice(1, 0, 'new ')}}};Copy the code
== Performance is not high, since the second li has been updated ==
There is key – value for index – in place update
- Update in place
Since the old and new virtual DOM are compared, the key is used to update the content, and if not, a new one is created
<ul id="myUL"> <li v-for="(str, Index in arr" :key="index"> {{STR}} <input type="text"> </li> </ul>Copy the code
Export default {data(){return {arr: [" old ", "new "," old ", "old three "]}}, methods: {addFn(){this.arr.splice(1, 0, 'new ')}}};Copy the code
Key is the index – graphical process (updated later in place)
0. The v-for loop generates a new DOM structure first. The key is continuous and corresponds to the data
-
Then compare the old and new DOM structures, find the differences, and patch them into the page
And then finally, I’ll add a Li, and then from the second, I’ll update everything
If the key value has id, use id; if no ID, use index
There is key – the value is ID – the highest performance
The key value must be a unique string or number
V-for does not move the DOM. Instead, it tries to reuse and update the DOM in place. If v-for moves the DOM, you need to use a special attribute key to provide a sorting cue
The key of the data in the new DOM exists. Go to the old virtual DOM structure to find the key tag and reuse the tag
The key exists in the new DOM, and the old virtual DOM structure does not find the key tag
If the old DOM key is missing from the new DOM, == remove the key tag ==
<template> <div> <ul> <li v-for="obj in arr" :key="obj.id"> {{ obj.name }} <input type="text"> </li> </ul> <button @click=" BTN "> </button> </div> </template> <script> export default {data() {return {arr: [{name: 'the boss', id: 50}, {name: '2', id: 31}, {10} name: '3', id:],}; {}, the methods: {BTN () this. Arr. Splice (1, 0, {id: 19, name: 'new'})}}}; </script> <style> </style>Copy the code
Graphic effect:
Vue foundation _ Dynamic class
-
Grammar:
- :class=”{class name: Boolean}”
<template> <div> <! -- Syntax: :class="{class name: Boolean}" --> <p :class="{red_str: Bool}"> dynamic class</p> </div> </template> <script> export default {data(){return {bool: true } } } </script> <style scoped> .red_str{ color: red; } </style>Copy the code
Summary: The class name is stored in a vUE variable assigned to the tag
Vue Basics – Dynamic style
-
grammar
- :style=”{CSS properties: values}”
<template> <div> <! <p style="{backgroundColor: color: RGB (51, 51, 51); ColorStr}"> dynamic style</p> </div> </template> <script> export default {data(){return {colorStr: 'red' } } } </script> <style> </style>Copy the code
Summary: Dynamic style keys are CSS property names
Vue computes attributes -computed
Computed: {” Computed attribute name “() {return” value “}} Needs:
- Requirement: Find the sum of 2 numbers to display on the page
<template> <div> <p>{{ num }}</p> </div> </template> <script> export default { data(){ return { a: 10, b: 20}}, // Calculate attributes: // Scenario: The value of a variable needs to be computed using another variable /* Syntax: computed attribute name () {return value}} */ / Note: Computed attributes and data attributes are both variables - cannot be the same name // Note 2: Variable changes within the function automatically recalculate results to return computed: { num(){ return this.a + this.b } } } </script> <style> </style>Copy the code
Note: the calculated property is also a vUE data variable, so do not have the same name as data
Summary: one data, depending on some other data calculated results
Vue computes attributes – cache
Computed attributes are cached based on the value results of their dependencies, and the results are cached directly as long as the dependent variables remain unchanged
Conclusion: The calculated attributes are cached according to the results of dependent variables, and the recalculated results are stored in the cache depending on the change, which is higher than the ordinary method
Vue computes attributes – written in full
Grammar:
Computed: {" attribute name ": {set {} (value), the get () {return" value "}}}Copy the code
Requirements:
- Evaluate attributes for v-Model use
The input box is ready
</span> <input type="text" V-model ="full"> </div> </div> </template> <script> Assign computed attributes - setters required // Resolve: /* Full syntax: computed: {" Computed attribute name "(){}," computed attribute name ": {set(value){}, get(){return value}}} */ export default {computed: {full: Set (val){console.log(val)}, Return "anonymous"}}}} </script> <style> </style>Copy the code
Summary: To assign a value to a calculated property, use the set method
Vue listener -watch
Grammar:
-
Watch: {" Listened attribute name "(newVal, oldVal){}}Copy the code
Complete example code:
<template> <div> <input type="text" v-model="name"> </div> </template> <script> export default { data(){ return { name: }} */ / newVal: {// newVal: {// newVal: {// newVal: {// newVal: {// newVal: {// newVal: { // oldVal: last value name(newVal, oldVal){console.log(newVal, oldVal); } } } </script> <style> </style>Copy the code
Summary: To listen for a property change, use the listening property Watch
Vue listener – Deep listening
-
Grammar:
Handler (newVal, oldVal) {}} handler (newVal, oldVal) {}}Copy the code
Complete example code:
<template> <div> <input type="text" v-model="user.name"> <input type="text" v-model="user.age"> </div> </template> <script> export default {data(){return {user: {name: "", age: 0}}}, // Target: listener /* Syntax: watch: Handler (newVal, oldVal){handler(newVal, oldVal){}, deep: }} */ handler: {user: {handler(newVal, oldVal){console.log(newVal, oldVal); // Handler (newVal, oldVal); }, deep: true } } } </script> <style> </style>Copy the code
Summary: Deep listening, handler fixed method trigger
Randomly add the above questions
Vue :key function, why can’t use index
The :key issues unique identifiers to the v-for loop generated tags for performance optimization
Because the order of the V-for data items changes, Vue also does not move DOM elements to match the order of the data items, but instead updates each element in place
:key If it is an index, because indexes are consecutive, if one of them is deleted, the last one will be deleted
When we delete :key and compare the old dom with the new dom, delete the label that does not exist for :key (insert the label in the same way as for add).
Array updates sometimes v-for does not render
Vue. Set ()/vm.$set() = vue.$set()