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

  1. 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()