1.watch初始化时立即执行
watch 是在监听属性改变时才会触发，初始化时并不会执行。
//使用时需要在created的时候手动调用一次，初始化时才会触发
export default {
data() { return { searchText: 'Joe' } },
created() {
this.fetchUserList();
},
watch: {
searchText: 'fetchUserList',
},
methods: {
fetchUserList() { console.log(this.searchText)}
}
}
//简便写法：可以添加immediate属性，这样初始化时也会触发
export default{
data(){ return { searchText:''} },
watch: {
searchText: {
handler: 'fetchUserList',
immediate: true,
}
},
methods:{
featchUserList(){console.log(this.searchText)}
}
}
2.路由组件传参--路由参数解耦
//一般在组件内传参用$route
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
正确的做法是通过props解耦
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
//布尔模式返回props：将路由的props属性设置为true后，组件内可通过props接收到params参数
export default {
props: ['id'],
methods: {
getParamsId() {
return this.id
}
}
}
//函数模式返回props
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
