一. 使用this.router.push()进行A-B，B-A 跳转保持原页面的页码状态

我们从A页面使用this.router.push("/page/b")跳转至B页面后，关闭B页面会通过this.$router.go(-1) 跳转回A页面，这时候我们会发现A页面页码变成了第一页。

项目需求是修改完毕之后再回来A页面时保持与跳转前一样的页码。处理方式如下：

A页面中：

// 跳转到B页面的方法
showPageB() {
  sessionStorage.setItem('page', this.queryParams.pageNum)
  // 业务逻辑
},

// Dom元素渲染前获取之前的页码
created() {
  if (sessionStorage.getItem('page')) {
    this.queryParams.pageNum = parseInt(sessionStorage.getItem('page'), 10)
    sessionStorage.removeItem('page')
  } 
  // 业务逻辑
}

二. Vue 响应式原理

详情请查看官网：https://v2.cn.vuejs.org/v2/guide/reactivity.html

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

1. 对象： this.$set(object, propertyName, value)

2. 数组：this.$set(arr, indexOfArr, newValue)

3. Vue 不允许动态添加根级响应式 property，所以你必须在初始化实例前声明所有根级响应式 property，哪怕只是一个空值。

4. Vue 在更新 DOM 时是异步执行，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。 如果你想基于更新后的 DOM 状态来做点什么，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})

三. == 和 === 区别

• == 和 === 都是用于比较两个值是否相等的操作符。== 会进行类型转换，=== 不会进行类型转换。

  • 5 == "5" // 返回 true，因为值相等，尽管类型不同

  • 5 === "5" // 返回 false，因为值相等，类型不同

• != 和 !== 都是用于比较两个值是否不相等的操作符。!= 会进行类型转换，!== 不会进行类型转换。

  • 5 != "5" // 返回 false，因为值相等，尽管类型不同

  • 5 !== "5" // 返回 true，因为值相等，类型不同