1. Difference between V-show and V-if

  • V-show Controls the display and hiding using the CSS display
  • V-if components really render and destroy, not show and hide
  • To frequently switch the display status, use v-show; otherwise, use V-if

2. Why is key used in V-for

  • Key must be used, and cannot be index or random
  • Diff algorithm uses tag and key to determine whether it is a sameNode
  • Reduce the number of renders, prompting rendering performance

3. Describe the Vue component lifecycle (parent and child components)

  • Single component life cycle diagram
  • Parent-child component lifecycle relationships (similar to the Onion model)

4. How do Vue components communicate

  • Father and son componentspropsandthis.$emit
  • Custom eventsevent.$no event.$off event.$emit
  • vuex

5. Describe the process of component rendering and updating

6. Realization principle of two-way data binding V-Model

  • The value of the input element = this.name
  • Bind input eventsthis.name = $event.target.value
  • Data update triggers re-render

7. Understanding of MVVM

8. What are the characteristics of compuited

  • Cache, data doesn’t change and doesn’t recalculate

9. Why does component data need to be a function

  • Basically. Vue compiles to a class. Using a component is equivalent to instantiating the component. If data is not a function, the component will use the data of the same stereotype according to the stereotype chain, i.e. the data of the component will be shared. If data were a function, the function would be executed in the instantiation, and data would be in the closure. They don’t interact

10. Which lifecycle should ajax requests be placed in

  • mounted
  • JS is single-threaded and Ajax gets data asynchronously
  • Mounted does not help, it only makes the logic more confused

11. How do I pass all props of a component to a child component? (Details, not high priority)

  • $props
  • <User v-bind= "$props" />

12. If multiple components have the same logic, how can I separate them?

  • mixin
//index.vue
<template>
    <div>
        <MixinDemo/>
    </div>
</template>
<script>

import MixinDemo from './MixinDemo'

export default {
    components: {
        MixinDemo
    },
}
</script>
Copy the code
// MixinDemo.vue
<template>
    <div>
        <p>{{name}} {{major}} {{city}}</p>
        <button @click="showName">Display name</button>
    </div>
</template>

<script>
import myMixin from './mixin'
export default {
    mixins: [myMixin], // Multiple can be added and will be merged automatically
    data() {
        return {
            name: The more 'double'.major: 'the web front end'}},methods: {},mounted() {
        // eslint-disable-next-line
        console.log('component mounted'.this.name)
    }
}
</script>
Copy the code
// mixin.js
export default {
    data() {
        return {
            city: 'Beijing'}},methods: {
        showName() {
            // eslint-disable-next-line
            console.log(this.name)
        }
    },
    mounted() {
        // eslint-disable-next-line
        console.log('mixin mounted'.this.name)
    }
}
Copy the code

13. When do asynchronous components load?

  • Loading large components
  • Asynchronous route loading
<! -- Asynchronous components --><FormDemo v-if="showFormDemo"/> // Define asynchronous components
   <button @click="showFormDemo = true">show form demo</button> // Set the button, click the event trigger showFormDemo to true

<script>
//import FormDemo from '.. /BaseUse/FormDemo' // Sets the synchronization component
export default {
    components: {
       FormDemo: () = > import('.. /BaseUse/FormDemo'),// Set the asynchronous component}},</script>
Copy the code

14. When should keep-alive be used?

  • Cache components without repeated rendering
  • Such as multiple static TAB page switching
  • Optimize performance
// Use cases combining components and dynamic components
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
Copy the code

15. When to use beforeDestroy(lifecycle function)

  • Bind custom eventsevent.$off
  • Clear timer
  • Unbind custom DOM events, such as Window Scroll

16. What is a scope slot

//index.vue
<ScopedSlotDemo :url="website.url"> 
            <template v-slot="slotProps">{{slotProps. Slotdata.title}} // define a parameter to receive the value passed in</template>
        </ScopedSlotDemo>
Copy the code
//ScopedSlotDemo.vue
<template>
    <a :href="url">
        <slot :slotData="website">// Define a value to pass to the parent component {{website. SubTitle}}<! -- Default shows subTitle when the parent component does not pass content -->
        </slot>
    </a>
</template>

<script>
export default {
    props: ['url'].data() {
        return {
            website: {
                url: 'http://wangEditor.com/'.title: 'wangEditor'.subTitle: 'Lightweight Rich Text Editor'}}}}</script>
Copy the code

17. What is the difference between action and mutation in Vuex

  • Action handles asynchrony, mutation does not
  • Mutation does atomic operations (i.e. one operation at a time)
  • An action can integrate multiple mutations

18. Vue-router Indicates the common routing mode

  • A hash of the default
  • H5history(server support required)

19. How do I configure vue-router asynchronous loading

export default new VueRouter({
    router:[
        {
            path:'/'.component:() = >import(
                /* webpackChunkName:"navigator"*/
                '. /.. /components/Navigator' 
            )
        },{
            path:'/feedback'.component:() = > import(
                /*webpackChunkName:"feedback"*/
                '. /.. /components/FeedBack')}]})Copy the code

20. Describe a DOM structure using vnode

<div id="div1" class="container">
    <p>vdom</p>
    <ul style="font-size:20px">
        <li>a</li>
    </ul>
</div>
Copy the code
{the tag:'div'.props: {id:'div1'.class: 'container'
    }
    children:[
        {
            tag:'p'.children:'vdom'}, {tag:'ul'.props: {style:'font-size:20px'
                children:[
                    {
                        tag:'li'.children:'a'}]}}Copy the code

21. What is the core API for listening for data changes

  • Object.defineProperty
  • And deep listening, listening array

Check the principle in detail

// Trigger to update the view
function updateView() {
    console.log('View Update')}// Redefine array prototypes to listen on arrays
const oldArrayProperty = Array.prototype
// Create a new object, the prototype points to oldArrayProperty, and extending the new method does not affect the prototype
const arrProto = Object.create(oldArrayProperty);
['push'.'pop'.'shift'.'unshift'.'splice'].forEach(methodName= > {
    arrProto[methodName] = function () {
        oldArrayProperty[methodName].call(this. arguments)// Array.prototype.push.call(this, ... arguments)
        updateView() // Triggers a view update}})// Redefine attributes to listen
function defineReactive(target, key, value) {
    // Deep monitor
    observer(value)

    / / core API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if(newValue ! == value) {// Deep monitor
                observer(newValue)

                // Set the new value
                // Note that value is always in the closure, and after this is set, the latest value will be retrieved when we get it
                value = newValue

                // Trigger to update the view
                updateView()
            }
        }
    })
}

// Listen for object properties
function observer(target) {
    if (typeoftarget ! = ='object' || target === null) {
        // Not objects or arrays
        return target
    }

    // Contaminate the global Array prototype
    // Array.prototype.push = function () {
    // updateView()
    / /...
    // }

    if (Array.isArray(target)) {
        target.__proto__ = arrProto
    }

    // Redefine attributes (for in can also iterate over arrays)
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// Prepare data
const data = {
    name: 'zhangsan'.age: 20.info: {
        address: 'Beijing' // Deep listening is required
    },
    nums: [10.20.30]}// Listen for data
observer(data)

/ / test
 data.name = 'lisi'
 data.age = 21
 console.log('age', data.age)
 data.x = '100' Vue. Set = Vue
 delete data.name // Delete attribute, listen not -- all Vue. Delete
 data.info.address = 'Shanghai' // Deep monitor
data.nums.push(4) // Listen for arrays
Copy the code
  • Object.defineproperty cannot listen for array changes
  • Redefine the prototype and rewrite methods like Push POP to implement listening
  • Proxies can natively support listening for array changes

22. Describe the principle of responsiveness

  • Listen for changes in data (question 21)
  • Component rendering and updating process (q5)

23. Time complexity of diff algorithm

  • O(n)
  • O(n^3) with some adjustments

24. Briefly describe the process of diFF algorithm

  • Patch (elem,vnode) and Patch (vnode, newVnode)
  • Patchvnodes and addVnodes and removeVnodes
  • UpdateChildren (Key’s Important Role)

25. Why is Vue rendering asynchronous and what does $nextTick do?

  • Asynchronous rendering (and merging data modifications) to improve rendering performance
  • $nextTick triggers a callback after DOM updates

26. Common performance optimization methods of Vue

  • The rational use ofv-show 和 v-if
  • The rational use ofcomputed
  • v-forWhen to addkey, and avoid simultaneous use with V-if
  • Custom events,DOMTimely event destruction
  • Use asynchronous components wisely
  • The rational use ofkeep-alive
  • The data level should not be too deep
  • Using vue-Loader to compile templates in the development environment (precompile)