The overview

  1. Which has a higher priority, V-if or V-for? If two are present at the same time, how can we optimize for better performance?
  2. Why does the Vue component Data have to be a function when the root instance of vue does not?
  3. Do you know what keys do and how they work in VUE
  4. How to understand the diff algorithm in VUE
  5. Talk about the understanding of vUE componentization
  6. Talk about the understanding of VUE design principles
  7. Explore your understanding of MVC, MVP, and MVVM

start

  • Which has a higher priority, V-if or V-for? If two are present at the same time, how can we optimize for better performance?

    Source: the compiler/codegen/index. Js

    <p v-for="item in items" v-if="condition">
Copy the code
    <! DOCTYPE html><html>
  <head> 
   <title>Vue event processing</title> 
  </head> 
<body> 
<div id="demo">
<h1>Which priority is v-if or V-for should be used correctly to avoid performance problems</h1>
<! -- <p v-for="child in children" v-if="isFolder">{{child.title}}</p> --> 
<template v-if="isFolder">
	<p v-for="child in children">{{child.title}}</p>
</template>
</div>
<script src=".. /.. /dist/vue.js">		</script> 
<script>
 const app = new Vue({ 
 	el: '#demo'.data(){
    	return{
        	children:[
            	{title:'foo'},
                {title:'bar'}}},computed: {isFplder(){
        	return this.children && this.children.length; }}console.log(app.$options.render)
</script>
</body>
</html>
Copy the code

    At the same level, the rendering function is as follows

    	(function anonymous() { 
  with(this){return _c('div', {attrs: {"id":"demo"}},[_c('h1',[_v("Who has a higher priority, V-for or V-if? How should it be used correctly to avoid performance problems?")]),_v(""), _l((children),function(child){return(isFolder)? _c('p',[_v(_s(child.title))]):_e()})],2)}}) 
Copy the code

    When the two are of different levels, the rendering function is as follows

    (function anonymous( ) { with(this){return _c('div', {attrs: {"id":"demo"}},[_c('h1',[_v("Who has a higher priority, V-for or V-if? How should it be used correctly to avoid performance problems?")]),_v(""), (isFolder)? _l((children),function(child){return _c('p', [_v(_s(child.title))])}):_e()],2)}}) 
Copy the code

    conclusion

    • Obviously v-for is resolved before V-if (tell the interviewer how you know that)
    • If it happens at the same time, each render will execute a loop before judging the condition, so the loop is inevitable anyway, wasting performance
    • To avoid this, nest the template in the outer layer, do a V-if judgment in this layer, and then do a V-for loop inside
    • If conditions occur inside the loop, items that do not need to be displayed can be filtered out ahead of time by evaluating attributes

  • Why does the Vue component Data have to be a function when the root instance of Vue does not?

    The SRC \core\instance\ state.js-initdata () function returns a new data object instance each time it is executed

    <! DOCTYPE html><html>
        <head> 
            <title>Vue event processing</title>
        </head>
        <body>
        
	 <div id="demo">
           <h1>Why does the Vue component Data have to be a function?</h1> 
           <comp></comp>
           <comp></comp>
	</div>
    <script src=".. /.. /dist/vue.js"></script>
    <script>
      Vue.component('comp', {
          template:'<div @click="counter++">{{counter}}</div>'.data: {counter: 0}})// Create an instance
       const app = new Vue({
        el: '#demo'});</script>
</body>
</html>
Copy the code

    The program doesn’t even pass vUE detection

    • conclusion

      There may be multiple instances of a Vue component. Defining data in object form causes them to share a single data object, and state changes affect all component instances, which is not reasonable; It is defined as a function, and will be used as a factory function to return the new data object in initData, effectively avoiding the problem of state pollution between multiple instances. This limitation does not exist in the Vue root instance creation process, also because there can only be one root instance and you do not need to worry about this situation.

    In subsequent updates,….