The vue project steps on the pit

　　Because the last small project was written many times, this time I plan to write a blog system well, and I just finished writing the management side of the administrator recently. There are many small holes in it.

　　In fact, I can only say that I am not particularly skilled in using Vue. Many problems are taken for granted, and many problems have been found in the implementation. Simply record a few that I think are worth recording.

1. A very pitted problem. When Vue changes one of the targets, it will actually re-render the methods and variables inside the template, which will cause a problem. as follows

<template>
  <div class="hello">
    <ul>
      <li v-for="item in datas">
        <div :style="{fontSize:changsize()}">{{item}}</div>
      </li>
    </ul>
    <input type="text" v-model="tests">
    {{tests}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      datas:['one','two','three','one','two','three','one','two','three'],
      fz:'',
      tests:'',
    }
  },
  watch:{
    data (hours) {
      console.log(111);
      return;
    }
  },
  methods:{
    changsize(){
      return (parseInt(Math.random()*15)+10)+'px';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
at the {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

　　The code is as above, if I enter content inside the input, it will change the tests inside the data, and then the entire template will be re-rendered. This causes the font size of the font I enter a data to change all at once. This goes against my original intention, I just want to assign a value once when the template is loaded! ! ! There is no need to change it when entering the content in the future. At first I thought that there could be something similar to a hook function to prohibit it. Finally found a problem.

I found this sentence while solving the problem on the Internet:

Each vue instance has a root element id property el that the Vue object uses to find the part to render. Then use the createDocumentFragment() method to create a documentFragment, traverse all child elements of the root element, hijack and insert document fragments in turn, and hollow out the root element. Then execute the compilation of Vue: traverse the nodes in the documentFragment, and process the attributes such as v-for and v-text accordingly. Finally, return the compiled documentFragment to the root element.

This means that it actually processes the whole, and if you want to change it, you may need to rewrite some methods...

Then change the way of thinking, think of a way at the level of the code you write.

1. The first way I thought of at the time was to generate a random font size and store it in the database every time I generated datas (in my project, the data was taken from the database). This can be set directly when loading. But there are downsides. Changed his original design idea. . . .

2. I thought about it carefully today and came up with a solution. Use a variable to store the font size generated when the template is refreshed, so that when using it, use this self-defined array variable and the index of the corresponding item to distinguish which font size to set. code show as below

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in datas">
        {{changsize(index)}}
        <div :style="{fontSize:font_size[index]}">{{item}}</div>
      </li>
    </ul>
    <input type="text" v-model="tests">
    {{tests}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      datas:['one','two','three','one','two','three','one','two','three'],
      fz:'',
      tests:'',
      font_size:[],
    }
  },
  watch:{
    data (hours) {
      console.log(111);
      return;
    }
  },
  methods:{
    changsize(index){
      if(this.font_size.length!=this.datas.length){this.font_size[index]=(parseInt(Math.random()*15)+10)+'px';  
      }else{
        return;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 

-------------------------------------------------2018-05-03 23:56:14--------------------------------------------------------