1. Non-mobile terminal users will be prompted to scan the QR code when they enter the page for the first time

Disadvantages of actual functions: If the user insists on using PC, the TWO-DIMENSIONAL code pop-up prompt will appear every time he switches the application page, affecting the user experience.

Optimization: the expected effect is that the user can cancel the prompt once in the process of using, and the prompt can be triggered again by manually refreshing the page to prevent the user from accidentally touching and skipping.

Project structure description: Slot content is used in the project, so this JS is written in the component that uses slot. Implementing multiple pages has a common effect. Pop-ups use the UI library, components maintain a Boolean value to control whether to pop up.

Create a Boolean variable in vuex to determine whether a popover should be displayed. The default is true (display). After the user cancels once, set it to false, and then control based on the state variable.

After the user enters for the first time, determine the screen resolution of the client (about 500 pixels). If the resolution is greater than that of the non-mobile terminal, a popup window will appear. Trigger the showPopup() function in the component’s Created lifecycle phase

Created (){this.showpopup () // showPopup()}, methods: {showPopup() {// Define showPopup() if(this.$store.state.popup){// Popup is a Boolean variable in state that controls whether the window pops again if(document.documentElement.clientWidth>500){ this.show = true; } this. codestore.com MIT ('changePopup');Copy the code

2. Transfer parameters for different pages

Note the method used: this.$router.push

//$router: is a write object

$route: route information object, read-only object

Query, assuming that page A is currently passing A parameter value to page B with route /b.

A data() {return {item:{id:1} itemValue:'x'}; }, methods:{ onClick(item) { if(item.id===1){ this.$router.push({ path: '/b', query: { value: this.itemValue } }) } }Copy the code

Page B receives parameters, and console.log on the console to see the output:

    this.getValue=this.$route.query.value
Copy the code

You can use both params and Query to pass parameters.

(1) Params can only use name to import routes, because params can only use name to import routes. If path is written, the receiving parameter page will be undefined.

(2) import routes using path as the query parameter.

(3) Params is a part of the route, and the parameter name must be added after the route. Query is the parameter concatenated after the URL.

(4) There are some differences between the two. Frankly speaking, Query is equivalent to get request. When the page jumps, request parameters can be seen in the address bar, while Params is equivalent to POST request, and parameters will not be displayed in the address bar.

3. Determining that objects are equal in value is a problem

Because the single data of the project is saved in the way of objects, when deleting or modifying a data, it is necessary to find the data in localStorage and traverse the data in the storage to find out whether the selected data is “equal”. However, since objects cannot be compared in the way of ===, the general method is to convert objects into strings for comparison, but the key and value order may not be the same and may not be equal.

There is a way to turn attribute sorting into string comparison

function clone(data){ return JSON.parse(JSON.stringify(data)); } function isObjectChanged(source, Const sourceClone=clone(source) const clone =clone(comparison) const sourceClone=clone(comparison JSON.stringify(sourceClone) const _comparison = JSON.stringify({... sourceClone,... ComparisonClone}) // expand operator... When the comparisonClone and sourceClone are comparisonClone and sourceClone are comparisonClone and sourceClone are comparisonClone and sourceClone Object.assign() return _source === _comparison // Return true for equality}Copy the code

If it’s equal, then you can manipulate the comparison object data

4. Select the key value when rendering the list

A bad use of key — using index as key.

When you write v-for, you’re going to use index as the key, and I have to say, sometimes that’s not a good idea.

When you delete li’s data, all the list elements will trigger the transition animation.

According to the official statement: The key mainly acts on the virtual DOM algorithm of Vue, and acts as a clue to identify VNode when diff New Nodes list and Old Nodes list.

If a key is used, Vue records elements based on the order of keys. Elements that once had a key are removed or destoryed if they no longer appear.

Thinking about catching bugs: If you think about it, every time you delete a piece of data, the index of the array element will change to -1. When you refresh the data again, the element content will be the same, but the index value of the key match has changed and it is not the same as before. Key values change so vue does not reuse elements of the same type to reduce rendering. This causes all previous elements that do not need to be removed to be removed, triggering the exit transition animation.

Additional tradeoffs: The key value for the V-for selection needs to be unique. But deleting the index element will change, and using the data itself as the key identifier is not unique. It is a good idea to add an attribute to the data so that it is unique and not affected by data manipulation. Timestamps might be a good choice, adding an extra property each time the user saves the data, using the timestamp generated by new Date() as the key.

Solution: Add a createSybol attribute to the data object (used to store data) and use the toISOString() method to return a string in ISO format: YYYY-MM-DDTHh: MM: ss.sssz. With millisecond accuracy, even if the user quickly adds two identical records in a short period of time, there is no conflict.

const timer=new Date()
data.createTimeSybol=timer.toISOString()
Copy the code

Add: Sometimes the added attribute is used as some identifier, but the value of the comparison does not want to compare the attribute, then you need to ignore the attribute and use delete, it is better to copy the original data do not operate, take the previous example:

function clone(data){
    return JSON.parse(JSON.stringify(data));
    // Return a deep-copy object
  }
function isObjectChanged(source, comparison) {
        const sourceClone=clone(source)
        const comparisonClone=clone(comparison)
        // Take the copied object and operate on it
        
        //—————————— Added content ———————————
        delete sourceClone.createTimeSymbol
        delete comparisonClone.createTimeSymbol
        / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
        
        const _source = JSON.stringify(sourceClone)
        const _comparison = JSON.stringify({... sourceClone,... comparisonClone})// Expand operator... Override the different values of the comparisonClone and sourceClone homonyms.
        // So implement the key sort consistent, and then converted to a string to compare wine can be. Similar to the Object. The assign ()
        return _source === _comparison
        
        // Return true for equality
      }
Copy the code

5, Webpack-dev-server running error

Error: Cannot find module ‘webpack-cli/bin/config-yargs’

If the webpack-cli version is inconsistent with the webpack-dev-server version, webpack-cli is degraded to 3

Solutions:

Re-install webPack-cli3 version NPM I webpack-cli@3 -d