VueJS 开发常见问题集锦

vue router

router.push

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

当带有params时，必须用name

一定要注意取数据的时候是route，不是router

数组更新检测

触发视图更新:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

1. 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

• 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

1. 由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除

解决方法：

• Vue.set(object, key, value) 方法
• 替换旧对象

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
例如：
this.obj = Object.assign({}, this.obj, { a: 1, e: 2 })

vuex

vuex中的变量是响应式的。

页面刷新后数据无法保存

解决方法：存sessionStorage、localStorage

如果变量状态不需要频繁变化，则存sessionStorage或localStorage较为合适。
如果变量状态需要频繁变化，或者在组件之间相互引用，则用vuex较为合适。

表单修饰符

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

vuex表单处理

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

filter

filter中获取不到this
解决方法：

var vm = new Vue({
    data () {
        return {
          content: 'abcd'
        }
    },
    filters: {
          XXX: function(data){
              return vm.content;
          }
    },
    ...
});

<template>
    <div>{{ content | reverseStr(content) }}</div>
</template>

new Vue({
    data () {
        return {
          content: 'abcd'
        }
    },
    filters: {
          XXX: function(data, content){
              return content;
          }
    },
    ...
});