1. Can’t get DOM solution (use $nextTick)

Definition: A deferred callback is performed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM.

NextTick () is a callback function that is deferred until the next DOM update. When the data is updated and rendered in the DOM, the callback function is automatically executed.

Usage Scenarios:

DOM manipulation by the Created () hook function of the Vue lifecycle must be placed in the vue.nexttick () callback


1.2. When you want to change the DOM element data in a project and do something based on the new DOM, a series of JS operations on the new DOM need to be put into the view.nexttick () callback function; In plain English, you need it when you want to use JS immediately to manipulate a new view after changing data

If you want to reapply a third-party plug-in when some of the DOM generated by vUE changes dynamically, you need to reapply the plug-in in the $nextTick callback function.

new Vue({
  el: '#app',
  data: {
    list: []
  },
  mounted: function () {
    this.get()
  },
  methods: {
    get: function () {
      this.$http.get('/api/article').then(function(res) {this.list = res.data.data.list // ref list references ul elements, I want to change the first li color to red this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'})}}})Copy the code

I get a list of attributes assigned to data model after data, and then I want to quote ul element found first li change its color to red, but in fact, this is an error, we know that in carrying out this sentence, ul is not li below, that is to say, just for the assignment of operation, the current update did not cause the view layer. So, in this case, Vue gives us the $nextTick method, and if we want to operate on a future updated view, we just pass the function we want to execute to this.$nextTick, and Vue will do the job for us.

this.$nextTick(()=> {DOM updates this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
 })Copy the code


2. Change data DOM does not update the solution

2.1 an array

Due to JavaScript limitations, Vue cannot detect the following altered arrays:

When you set an item directly using an index, e.g. This.items [indexOfItem] = newValue When you modify the length of an array, e.g. This.items. Length = newLength

Solution:

  • Vue.set(this.items, indexOfItem, newValue)
  • this.items.splice(indexOfItem, 1, newValue)
  • This.$set(this.items, indexOfItem, newValue) (This.$set instance method is an alias of the global method vue.set)
  • this.items.splice(newLength)
2.2 object

Due to JavaScript limitations, Vue cannot detect the addition or deletion of object attributes:

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'}}}) // You can add a new age attribute to the nested userProfile object: Vue. Set (vm.userProfile,'age'// You can also use vm.$setInstance method, which is simply an alias for the global vue.set: this.$set(this.userProfile, 'age'// Sometimes you may need to assign multiple new attributes to existing objects, such as object.assign () or _.extend(). In this case, you should create a new object with the properties of both objects. this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor:'Vue Green'} Vue. Set (object,key,value); Plan 2: Use this.$set(this.obj,key,value); Method 3: Use object.assgin ({},this.obj) // to remove the Object attribute method (the first Object name, the last concrete attribute name) : this.$delete(this.userProfile, "name");Copy the code