watch:是监听某一个值的变化,初始化时不会监听;如果要在数据变化的同时进行异步操作或者是比较大的开销时,推荐watch;watch的触发早于computed的触发
computed:有缓存,如果计算的值没有发生改变,是会走缓存的;而且一定要return。
所以区别来源于用法,只是需要动态值,那就用 computed ;需要知道值的改变后执行业务逻辑,才用 watch。
computed 计算属性
// 通过computed 直接获取 url中的参数id
computed:{
id(){ return this.$route.query.id }
computed 的执行顺序
数据在 父created 改变及前的,最早会在子组件的mounted前触发;路由的创建就在 父组件created之前
created 中改变kong
而如果数据kong在mounted 中改变的,那么最早会在子组件的mounted后才会触发,
mounted 中改变kong
watch 监听属性
watch:{
"$route": {
// 另一种写法 handler: 'fun', // 字符串 fun 为methods中定义的方法
handler: function () {},
deep:true, // 对象深度监听
immediate: true // 首次绑定的时候,是否执行handler
立即触发一次,别的没什么区别;会在子元素的ceated之前触发,获取的是父组件中data里面的赋值或者created的中修改值。
父mounted中赋值,就会触发两次,一次是immediate为true的立即触发,然后就是为false的触发 ,所以要想获取 父元素中 mounted 之前的修改,只能使用 immediate为true
监听父元素或子元素在mounted中及之后的赋值的变化,最早在子元素的mounted里面监听到