vue综合知识

MVVM的优势

双向绑定，Model变化时，View也会自动变化，view发生更新，model也跟着更新。
减少了dom操作，因为我们只需要关注数据就可以。
mvvm设计思想降低了代码的耦合性，方便维护。

单向数据流

在父向子传值的时候，如果改变父组件的值，子组件会跟着同步更新，反之则不会。

双向数据绑定

v-model，数据发生变化会同步到视图，视图发生变化会同步数据。

watch和computed哪个可以异步

watch是监听一个值的变化，然后执行对应的回调，watch支持异步。

计算属性(computed)不能进行异步操作，因为计算属性(computed)是通过return返回值传递参数异步操作的时候return是没有意义的，异步函数的返回值都不是用return返回的，所以vue中的计算属性(computed)不能使用异步函数。

$route和$router的区别

区别

this.$router是全局路由器对象

0this.$route是当前激活的路由对象，包含了当前的路由信息。

$route route是路由信息对象，里面主要包含路由的一些基本信息，包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom

$router router是VueRouter的实例，包含了一些路由的跳转方法，钩子函数等

v-model

v-model底层原理实际上是分别利用了v-bind用来绑定value的值，用v-on去绑定input标准事件，这是事件用来监听当输入域内容发生变化的时候来执行一些事情。具体做的事情就是通过$event这个事件对象获取到最新的输入域的值，然后把最新的值赋值给旧的值，从而进行数据的更新。这样的话就完成了双向数据绑定。

自定义指令

什么是自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令,对普通 DOM元素进行底层操作，这时候就会用到自定义指令。

为什么要有自定义指令？

vue提供的系统指令满足不了我们的需求，所以我们需要自定义指令。

如何自定义指令？

自定义指令分为全局自定义指令和局部自定义指令。通过Vue.directive(全局);组件内设置directives(局部)。

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有，但是可以通过比较更新前后的值来忽略不必要的模板更新。

一些自定义指令的应用场景：