在v-model上用Vuex中state的值:
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
使用过$on
,$once
去监听所有的生命周期钩子函数:
export default {
mounted() {
this.chart = echarts.init(this.$el)
// 请求数据,赋值数据 等等一系列操作...
// 监听窗口发生变化,resize组件
window.addEventListener('resize', this.$_handleResizeChart)
// 通过hook监听组件销毁钩子函数,并取消监听事件
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.$_handleResizeChart)
})
},
methods: {
$_handleResizeChart() {
// this.chart.resize()
}
}
}
使用hook在外部监听组件的生命周期函数:
<template>
<!--通过@hook:updated监听组件的updated生命钩子函数-->
<!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
<custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {
components: {
CustomSelect
},
methods: {
$_handleSelectUpdated() {
console.log('custom-select组件的updated钩子函数被触发')
}
}
}
</script>
路由跳转尽量使用 name 而不是 path:
我们前期配置的路由路径后期难免会进行修改,如果我们页面跳转的地方全是使用的 path
,那么我们需要修改所有涉及该 path 的页面,这样不利于项目的维护。而相对于 path,name 使用起来就方便多了,因为其具有唯一性,即使我们修改了 path,还可以使用原来的 name
值进行跳转。
this.$router.push({
name: 'page1'
});
// 而不是
this.$router.push({
path: 'page1'
});
使用唯一值来代表key 来优化 v-for 循环:
推荐使用唯一值 id 作为 key,如果没有则可以使用数组的下标 index 作为 key。因为如果在数组中间插入值,其之后的 index 会发生改变,即使数据没变 Vue 也会进行重新渲染,所以最好的办法是使用数组中不会变化且唯一的那一项作为 key 值。
<template>
<ul>
<li v-for="(item, index) in arr" :key="item.id">{{ item.data }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
arr: [
{
id: 1,
data: '苹果'
},
{
id: 2,
data: '栗子'
},
{
id: 3,
data: '饺子'
}
]
}
}
}
</script>
Vue中重置data中的数据:
用Object.assign可以将你目前组件中的data对象和组件默认初始化状态的data对象中的数据合并,这样可以达到初始化data对象的效果:
Object.assign(this.$data,this.$options.data())
在当前组件的实例中$data属性保存了当前组件的data对象,而$options是当前组件实例初始化时的一些属性,其中有个data方法,即在在组件中写的data函数,执行后会返回一个初始化的data对象,然后将这个初始化的data对象合并到当前的data来初始化所有数据