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()
- 由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:vm.items.length = newLength
- 由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除
解决方法:
- Vue.set(object, key, value) 方法
- 替换旧对象
vuex
vuex中的变量是响应式的。
页面刷新后数据无法保存
解决方法:存sessionStorage、localStorage
如果变量状态不需要频繁变化,则存sessionStorage或localStorage较为合适。
如果变量状态需要频繁变化,或者在组件之间相互引用,则用vuex较为合适。