Vue Interview questions

Ie8 and below is not supported, partially compatible with IE9, fully compatible with IE10 and above, because vue’s responsivity principle is based on ES5 object.defineProperty () and this method does not support IE8 and below.

• beforeCreate: called before instance creation;
• created: the instance is called after creation, completes data observation, property and method calculation, watch/event event callback, and template rendering into HTML (vm.$el not defined) so data initialization is best done in this stage;
• beforeMountIn:$elCalled before mount, the associated render function is called for the first time during which the module is rendered to HTMLvm.$elIt’s still undefined;
• mountedIn:$elAfter mount is called at this timevm.$elCan be called, can not guarantee that all the child components are mounted, until the view is fully updatedvm.$nextTick();
• beforeUpdate: called when data is updated;
• updated: called after data update;
• activated:<keep-alive></keep-alive>Called when the wrapped component is activated;
• deactivated:<keep-alive></keep-alive>Called when the wrapped component leaves;
• beforeDestroy: called before instance destruction, when the instance is still fully available;
• destroyed: called after the instance is destroyed, at which point everything in the instance is unbound, all event listeners are removed, and all subinstances are destroyed.

It cannot be the same name because both computed attribute names, data data names, and props data names are mounted on the VM instance, so none of them can be the same name.

if (key in vm.$data) {
    warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
    warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
Copy the code

Not the same name, because look at the source code

let data = vm.$options.data
const keys = Object.keys(data)
const methods = vm.$options.methods
let i = keys.length
while (i--) {
    const key = keys[i]
    if(process.env.NODE_ENV ! = ='production') {
        if (methods && hasOwn(methods, key)) {
            warn(
              `Method "${key}" has already been defined as a data property.`,
              vm
            )
        }
    }
}
Copy the code

Wrap the routing component with the
built-in component, updated in the hook function activated.

• Activated hook: called when the keep-alive component is activated.
• Deactivated hook: Called when the keep-alive component is disabled.
• The above hooks are not called during server-side rendering.

Can’t. This will be undefind, because the arrow function this points to this at definition, not this at execution, so it will not point to the context of the Vue instance.

Watch :{show (val)=>{console.log(this)//undefind this will point to show}, id(val){conosle.log(this)//Vue instance object}}Copy the code

Specifying immediate: true in the option argument triggers the callback immediately with the current value of the expression.

watch:{
   a:{
       handler:function(val,oldval){
           
       },
       deep:true}}Copy the code

Can’t. This will be undefind, because the arrow function this points to this at definition, not this at execution, so it will not point to the context of the Vue instance.

• This $forceUpdate ().
• Add a key to the component and change the value of the key.

This.$emit(‘eventName’,data),data can be an object that contains multiple arguments from the child component and is then passed to the parent component.

Add the modifier. Native.

• Start by assigning an ID reference to the child component using the REF feature<base-input ref="myInput"></<base-input>
  • For example, a child component has a focus method that can be called like thisthis.$refs.myInput.focus();
  • For example, if the child component has a value, it can be used like thisthis.$refs.myInput.value.
• Start by using the ref feature to assign an ID reference to a normal DOM element

  <ul ref="mydiv">
      <li class="item"</li> <li class="item"> first li</li> </ul> console.log(this.$refs['mydiv'].getElementsByClassName('item')[0].innerhtml)// First liCopy the code

Use this.$parent to access it

this.$root

• No route switching when keep-alive is used;
• v-if='false';
• performvm.$destroy();

• Dynamic components

  < Component :is=”componentName”>, componentName can be a local component name and a global component name registered on this page, or a component option object. You can dynamically toggle select components when the control componentName changes.

• Is the use of the

  Some HTML elements, such as

  , < OL >,
  , and < SELECT >, have strict restrictions on which elements can appear inside them.
  

  Some HTML elements, such as

• , , and, can only appear inside certain other elements.

<ul>
    <card-list></card-list>
</ul>
Copy the code

So the above
will be promoted externally as invalid content and cause the final render to fail. It should read:

<ul>
    <li is="cardList"></li>
</ul>
Copy the code

• props
• this.$emit('input',data)
• this.$root.$on('input',function(data){})andthis.$root.$emit('emit',data)
• this.$refs.tree
• this.$parent
• provideandinject
• vueX

String, Number, Boolean, Array, Object, Date, Function, Symbol, and also Personnel, a custom constructor, And use instanceof to verify that the propWokrer value was created using this custom constructor.

function Personnel(name,age){
    this.name = name;
    this.age = age;
}
export default {
    props:{
        wokrer:Personnel
    }
}
Copy the code

export default {
    props:{
        propA:[String,Number],
        propB:{
            type:Number,
            default:1,
        },
        propC:Boolean,
        propD:{
            type:Object,
            default() {return{}}}}}Copy the code

• @click="handleOpen"By default, the first argument is passed to the Event object;
• @click="handleOpen(0, $event)"If you need to pass in parameters andeventObject is required$eventIn order to geteventObject and pass in handleOpen.

$event.currenttarGet always points to the element to which the event is bound, while $event.target points to the element at which the event occurred.

• Event modifier
  • .stop: Prevents event delivery;
  • .prevent: prevents default events;
  • .capture: default bubbling process listener when there is no capture modifier;
  • .self: only the element of the currently bound event can fire;
  • .once: The event only fires once;
  • .passive: The default event is triggered immediately.passiveand.preventUse it together because.preventWill not work.
• Form qualifier. Number.lazy. Trim

Self will block all clicks, whereas @click.self. Prevent will only block clicks on the element itself.

The v-model does not listen for changes to the value of the input tag immediately after it is lazy. It listens for changes to the value of the input tag only after it loses focus.

Use the key modifier < input@keyup. enter=”submit”> to trigger the Submit event when the Enter key is pressed.

• .enter
• .tab
• .delete(Capture delete and Backspace keys)
• .esc
• .space
• .up
• .down
• .left
• .right

V-show, V-if, V-else -if, V-else, V-for, V-ON, V-bind, V-model, V-once, V-slot, V-html, V-text.

It renders elements and components only once. In subsequent re-rendering, the element/component and all its child nodes are treated as static and skipped. This directive can be used when there is a lot of static content in the component.

• v-showSwitch element display attribute to control element display hide, initialization will render, applicable to frequently show hidden elements, cannot be used in<template>On;
• v-if, by destroying and rebuilding the component, to control the component show hide, initialization will not render, do not apply to frequently show hidden components, can be used in<template>On.

Yes, v-on is followed by an object, but event modifiers are not supported.

<template>
    <div v-on:{click:a,dblclick:b}></div>
</template>
<script>
    methods:{
        a(){
            alert(1)
        },
        b(){
            alert(2)
        }
    }
</script>
Copy the code

• v-cloakYou can fix the problem of setting uncompiled Mustache tags ({{value}}) to show.

  [v-cloak] { display: none! important; } <div v-cloak> {{ message }} </div>Copy the code

• v-preSkip the compilation of this element and its children. You can use it to display the original Mustache tag. Skipping a large number of nodes without instructions speeds up compilation.<span v-pre>{{ this will not be compiled }}</span>

4. Dynamically bind Class and Style

You don’t have to.

<style lang="less" scoped></style>

If used in a public component, changing the style of the public component requires /deep/.

Vue adds a unique mark ‘data-V-XXxxxx’ to the DOM structure and CSS styles to ensure uniqueness and achieve the role of privatized style without global pollution.

• In the componentcommentsOption set totrue
• <template comments> ... <template>

$nextTick(() =>{this.handleadd()}), which delays the handleadd callback until after the next DOM update cycle.

Object.assign(this.$data,this.$options.data())

filters:{
    addUnit(val){
        if(val){
            return val+Yuan per meter
        }else{
            return ' '
        }
    }
}
Vue.filter('addUnit'.function(val){
    if(val){
        return val+Yuan per meter
    }else{
        return ' '
    }
})
new Vue({
  // ...
})
Copy the code

Can not be