2022-02-09 面试题:vue(三) $router和$route的区别,computed和watch的区别

1.$router和$route的区别?

回答

• $router是VueRouter的实例,相当于一个全局的路由对象
  里面包含很多个属性和子对象,比如history,和常用的跳转链接this.$router.push
• $route对象表示当前的路由信息,包含了当前URL解析得到的信息,包含当前的路由,参数和query对象等等

补充

1.$router常用api:

① this.$router.push('hash 地址') 跳转到指定 hash 地址，并增加一条历史记录
② this.$router.go(数值 n) 实现导航历史前进、后退

2.$route常用的api

1、$route.path
字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。
2、$route.params
一个 key/value 对象，包含了 动态片段 和 全匹配片段，
如果没有路由参数，就是一个空对象。
3.$route.query
一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 $route.query.user == 1，
如果没有查询参数，则是个空对象。
4.$route.hash
当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
5.$route.fullPath
完成解析后的 URL，包含查询参数和 hash 的完整路径。
6.$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7.$route.name 当前路径名字
8.$route.meta 路由元信息

2,computed和watch的区别?

回答

• computed支持缓存,watch不支持缓存

computed支持缓存，相依赖的数据发生改变才会重新计算；
watch不支持缓存，只要监听的数据变化就会触发相应操作

• computed不支持异步,watch支持异步操作

computed不支持异步，当computed内有异步操作时是无法监听数据变化的；
watch支持异步操作

• computed属性的属性值是一函数,watch监听的数据必须是data中声明过或父组件传递过来的props中的数据

computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。
 watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器

补充

得分点

    computed值有缓存、触发条件是依赖值发生更改、 watch无缓存支持异步、监听数据变化

标准回答

    computed： 是计算属性，依赖其它属性值，
    并且 computed 的值有缓存，只有它依赖的属性值发生改变，
    下一次获取 computed 的值时才会重新计算 computed 的值；

    watch： 更多的是观察的作用，
    支持异步，类似于某些数据的监听回调 ，
    每当监听的数据变化时都会执行回调进行后续操作；

加分回答

    computed应用场景：需要进行数值计算，并且依赖于其它数据时，应该使用 computed，
    因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

    watch应用场景：需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，
    使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，
    并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。