脚本宝典收集整理的这篇文章主要介绍了vue系列之踩坑之旅，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

v-if

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
用 key 管理可复用的元素。

只需添加一个具有唯一值的 key 属性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-for key

理想的 key 值是每项都有的唯一 id。
参考链接： 为什么使用v-for时必须添加唯一的key?

使用v-for渲染元素时，使用元素自身的id属性去指定渲染元素的key值有利于单个元素的重新渲染，若采用其他如v-for提供的index, key等值，在改变渲染出来的DOM结构时，会触发所有元素的重新渲染，当数据过大时，可能会造成性能负担。

数组更新检测

触发视图更新:

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;
          }
    },
    ...
});

脚本宝典总结

以上是脚本宝典为你收集整理的vue系列之踩坑之旅全部内容，希望文章能够帮你解决vue系列之踩坑之旅所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。