1、watch监听路由变化
watch: {
$route (to, from) {
if (from.fullPath === '/Organize/attendPer') {
Object.assign(this.canteenDetailAdd[from.params.id].flowInstanceStepApproveAdd, this.attendPer)
// 解决视图 不立即更新
this.canteenDetailAdd.splice(this.canteenDetailAdd.length, 0)
}
// 可以通过 watch 路由监听,获取到id 可以解决根据循环生成的数据,携带id进行不同操作
// console.log(to,from) // 可以看到from 或 to 是一个对象,对象包括:
// {name: "Organize", meta: {…}, path: "/Organize/attendPer", hash: "", query: {…},?…}
// params 的详细内容:params:{type: "attendPer", id: 0}
}
},
2、watch监听数据变化
<template>
<div>
<div>{{numbers}}</div>
<div @click="change">点击改变numbers</div>
<div>{{obj.a}}</div>
<div @click="update">点击改变obj</div>
</div>
</template>
<script>
export default {
data () {
return {
numbers: 0,
obj: {
a: 1
}
}
},
watch: {
// 方式1:监听一维数据变化,初始加载不会立即监听
// numbers () {
// console.log(this.numbers)
// }
// 方式2 :
// numbers: {
// handler () {
// console.log(this.numbers)
// },
// // 使用immediate 会在初绑定就进行监听
// immediate: true
// }
// 监听二维数据变化
// 方法1: 这样只有obj里面的任何一个数据发生变化,都会被监听,根据需要使用,否则消耗性能
// obj: {
// handler () {
// console.log(this.obj.a, 88)
// },
// // 需要深度监听
// deep: true
// }
// 方法2:根据需求,监听对象属性
'obj.a': {
handler () {
console.log(this.obj.a, 88)
},
depp: true, // 深度监听
immediate: true // 初次绑定进行监听
}
},
methods: {
change () {
this.numbers++
},
update () {
this.obj.a++
console.log(this.obj.a)
}
}
}
</script>