(3) array de duplication

 let arr = [1, 2, 34, 34, 5, 6, 6, 7];

      function arryQC(arr) {
        // The first
        // return Array.from(new Set(arr))

        // Second
        return [...new Set(arr)];
      }
      console.log(arryQC(arr));

      console.log(
        "==============This is the second method indexOF==============================="
      );

      let arr1 = [1, 2, 34, 34, 5, 6, 6, 7];

      function arryQCs(arr) {
        let brr = [];
        arr.forEach((element) => {
          if (brr.indexOf(element) === -1) {
            brr.push(element);
          }
        });
        console.log(brr);
      }
      arryQCs(arr1);

      console.log(
        "==============This is the third method filter==============================="
      );

      let arr2 = [1, 2, 34, 34, 5, 6, 6, 7];

      function arryQC3(arr) {
        const result = arr.filter((item, index) => {
          return arr.indexOf(item) === index;
        });
        console.log(result);
      }
      arryQC3(arr2);

      console.log(
        "==============This is the fourth method reduce==============================="
      );

      let arr3 = [1, 2, 34, 34, 5, 6, 6, 7];

      function arryQC3(arr) {
        const result = arr.reduce((pre, item) => {
          return pre.includes(item) ? pre : [...pre, item];
        }, []);
        console.log(result);
      }
      arryQC3(arr3);

(5) deep copy

 // Implementation: deep copy
      // Note: write the judgment of Array type first (because the parent class of Array is Object, no matter the Array Object is written on it, it will be included)
      let newObj = {};
      function deepClone(newO, old) {
        for (let key in old) {
          let value = old[key];
          if (value instanceof Array) {
            newO[key] = []; // What is copied is an array. Create a new array
            deepClone(newO[key], value);
          } else if (value instanceof Object) {
            newO[key] = {}; // New object
            deepClone(newO[key], value);
          } else {
            newO[key] = value; // Basic type, pure value copy
          }
        }
      }
      deepClone(newObj, oldObj);
      console.log(newObj,'=============',oldObj);

      // Summary: deep copy
      // Recurse the reference type of each layer, create a new one when encountering an object / array, and copy the basic value

(6) differences between cookies.sessionstorage and localStorage

cookies: a piece of data used by a website to mark the identity of a user. Usually, it is an encrypted string, and by default, it will only be carried in the HTTP request of the same source

sessionStorage: it is a local storage mode of the browser. It is stored in the form of key value pairs. The stored data will be automatically deleted after the browser is closed

localStorage: it is a way of local storage of the browser. It is stored in the form of key value pairs. It stores persistent data, which is not deleted actively and will always exist

sessionStorage and localStorage are larger than cookies

7 throttling and anti vibration

Anti shake
function debounce(fn, theTime) {
           let timer = null
            return function () {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.call(this);
                }, theTime);
            }
        }
throttle
 function throttle(fn，timer) {
            return function () { // Real event handler (this: event source)
                if (fn.t) return;
                fn.t = setTimeout(() => {
                    fn.call(this) // Make sure the this keyword in the above function is the event source (fn() calls, and the above this becomes window, which is wrong)
                    fn.t = null // Set to null, and re create a timer when the event is triggered again
                }, timer)
            }
        }

Difference between shallow copy and deep copy

       * Shallow copy: only refers to the copied memory address. If the original address changes, the shallow copy object will change accordingly
       * The old and new objects share memory. Modifying one of them will also affect the other
       * Method 1: direct assignment
       * Method 2: object.assign()
       * 
       * Deep copy: create a new address in memory for storing copied objects
       * Old and new objects will not share memory, and modifying one of them will not affect the other
       * 
       * Method 1: JSON object
       * 
       *  let obj = {name:'Zhang San',age:20}
          const obj1 = JSON.parse(JSON.stringify(obj))
          obj1.age = 22
          console.log(obj.age,'==============',obj1.age); // 20 '==============' 22
       * 
          Method 2: extension operator
          let obj = { name: "Zhang San", age: 20 };
          let obj1 = {...obj,age:25}
          console.log(obj.age, "==============", obj1.age); // 20 '==============' 25


     

reduce sum

 const arr = [
        { id: 1, name: "watermelon", state: true, price: 10, count: 1 },
        { id: 2, name: "Pumpkin", state: false, price: 20, count: 2 },
        { id: 3, name: "Balsam pear", state: true, price: 30, count: 3 },
      ];

        let amt = 0
        // The first
        // arr.filter(item => item.state).forEach(item => {
        
        //   amt += item.price * item.count
        // }) 
        
        // The second type is reduce
        // arr.filter(item => item.state). Reduce ((cumulative result, current cycle item) = >, initial value)

       const result = arr.filter(item => item.state).reduce((amt,item) => {
          return amt += item.price * item.count
        },0)

       console.log(result);

(1) Vue route parameter transmission

1 params Pass on reference
this.$router.push({
        name:"admin",
　　　　//Here, params is an object, ID is the attribute name, and item.id is the value (it can be directly taken from the current component or Vue instance)
        params:{id:item.id}
})

//Routing configuration corresponding to this component
{
　　//Component path
    path: '/admin',
　　//Component alias
    name: 'admin',
　　//Component name
    component: Admin,
}
2.Route attribute dynamic parameter transmission
this.$router.push({
        name:"/admin/${item.id}",
})
    ===receive this.$route.params.id===
    Note: the parameter is not visible, and the parameter value cannot be obtained after the page is refreshed
3 query Pass on reference
this.$router.push({
        name:"/admin",
　　　　 query:{id: item.id}
})

2) Vue route guard

Front routing guard
router.beforEach((to,from,next)=>{
    // To represents the information object of the route to be accessed
    // from represents the information object of the route to leave
    // The next() function indicates release
})

(3) Vue component value transfer

1 User defined attribute passed from parent to child
<Child-Vm :msg="msg"></Child-Vm>
<template>
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        props:['msg']
               
    }
</script>
2 Custom event of child transferring value to parent $emit(Event name, data)
<child @changeNum="getFromSon" class="er"></child>
 changeNumNew(){
            this.$emit('changeNum',this.msg)
        }
 getFromSon(val){
            this.fromSom = val
        }
3 Brother pass on value
 Create a bus.js Module and share one Vue Instance object
 At the sender, call bus.$emit(Event name, data to be sent)Trigger custom event
 On the receiving side, call bus.$on(Event name, event handler)Register custom events

(4) difference between watch and calculated

1. The functions that can be completed by computed can be realized by watch

2. The functions that can be implemented by both the watch and the computed may not necessarily be implemented. For example, the watch can perform asynchronous operations

Two small principles

1. The functions managed by Vue should be written as ordinary functions, so that this refers to the VM or component instance object

2 all functions not managed by vue (callback function of timer, callback function of Ajax, etc.) are best written as arrow functions

5 Vue life cycle

1 vue With 8 life cycles

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforDestroy
destroyed
 Parent child component lifecycle relationship
 Creating: parent created --> son created --> son mounted --> father mounted
 Updating: parent beforeUpdate --> son beforeUpdate --> son updated --> father updated
 Destroy: parent beforeDestryy --> son beforeDestryy --> son destroyed --> father destroyed

2.What life cycle and sequence will be executed after entering the page or component
beforeCreate
created
beforeMount
mounted

3.At that stage, there were: $el，At that stage, there were: $data
created have data No, el
beforeMount have data No, el
mounted Both

4. If you join keep-alive，There will be two more life cycles
activated/deactivated

5. If you join keep-alive，What life cycles will be executed for the first time
beforeCreate
created
beforeMount
mounted
activated

6. If you join keep-alive，second
 Times or times n Which life cycles will be executed by the first entry
 Execute only one activated
7 Talk about your right keep-alive Understanding

1 vue A built-in component, cache component====>Improve performance

2 For example, the home page will jump to the details page, and repeated jump will not require repeated requests

(6) Vue routing mode

There are two routing modes::hash(default) history
1 Different manifestations 
history : http:/localhost:8080/about
hash : http:/localhost:8080/#/about
2.Jump request
history Will send a request
hash No request
3 After packaging, the front-end self-test shall be used hash,If used: history A blank page appears

(7) Vue data update view does not refresh

1 Modify the array value type and add new array members
 Method: add a new array
2 Add new objects in objects
 Solution: new object replacement
export default {
    data() {
        return {
            count: 0,
            colors: ['red', 'green', 'blue']
        }
    },
    methods: {
        changeValue() {
            setTimeout(() => {
                error
                this.colors[0] = 'apple'
                The first
                this.colors =  ['apple', 'green', 'blue']
                Second
                this.$set(this.colors,0,'apple')
            },500)
        }
    }
}
The best way $set The first parameter indicates that the data object can be: vue Instance object, or other objects
 The second parameter represents the property name
 The third parameter represents the attribute value

8 vue event binding $event

 <!--add No parameter transfer (default) e Native event object DOM
         Second add(The first parameter, $event) Interchangeable position
        -->
        <button @click="add">click</button>

add(e) {
            this.count += 1
            if(this.count % 2 === 0){
                e.target.style.backgroundColor = 'red'
            }else{
                 e.target.style.backgroundColor = ''
            }
            // console.log(e);

        }
2 Event modifier
e.preventDefault() Block default behavior
e.stopPropagation() Prevent foaming

9 vue event modifier

Event modifier	explain
.prevent	Block default behavior (e.g. block a link jump, block form submission)
.stop	Prevent event bubbling
.capture	Trigger the current event handler in capture mode
.once	The bound event is triggered only once
.self	The event handler is triggered only when event.target is the current element itself

10 Vue v-module instruction modifier

Modifier	effect
.number	Automatically convert the value entered by the user to a numeric type
.lazy	Update at 'change' instead of 'input'
.trim	Automatically filter the first and last blank characters entered by the user

11 Vue ref

operation dom
 Method element/Component definition ref
 Operation: $refs
<input type="text" v-if="inputVisible" @blur="showbtn" ref="myRef">
        <button v-else @click="showInp">Show text box</button>

 showInp() {
            // Lose focus
            this.inputVisible = true

            // Get focus $nexttick DOM callback after update

            this.$nextTick(() => {
                this.$refs.myRef.focus()
            })

        },
        showbtn() {
            this.inputVisible = false
        }

Global components

import Coutn from 'address'
vue.commponent('Component name'，Coutn)
Call through label