.vue文件解析2

本篇是继上篇《.vue文件解析》之后的续篇，主要讲了使用Vue作为日常开发框架之后的一些体验，以及关于单文件组件的一些理解。其中对于Vue官方文档有的不再做过多阐述，只对单文件组件的一些个人理解做描写。

组件内常用钩子

所谓钩子，即是一种事件。抛开框架来说，我们写业务通常会用到一些DOM事件，比如页面加载完成、点击、滚动事件等，有这些事件能让我们在程序运行的各个阶段执行我们想要的效果。有些时候我们需要在自己定义的状态下抛出一个事件，便是框架的钩子函数。

• created：在当前组件实例化完了之后触发。所谓实例化完，是指当前组件完成了自身的一些配置，相当于new个对象。此时，程序可以访问组件的data/computed/methods/watch上的方法和数据，但不能访问该组件相关的dom对象及方法，因为此时尚未挂载（即注入）到dom文档对象中，相当于不能访问this.$el,this.$ref。
• mounted：在当前组件实例挂载到DOM节点上后触发。在这里可以做DOM相关的一些操作，因为此时的组件已经处于文档树之中。如果要强行做一个比喻的话，这个钩子就相当于页面的load事件。这里需要注意的一点是，mounted只是当前组件的挂载，而不是相关所有子组件的挂载，如果需要等待所有子组件都挂载的状态，请使用this.$nextTick()方法。
• updated：当前组件实例更新后触发。假设有一个列表组件，在创建的时候去请求数据，在等待数据返回的过程中实例创建完并已挂载成功（首次不触发updated），当数据返回并赋值data中的变量时组件实例更新，此处触发一次updated。这个钩子常常用来获取视图更新后的dom值（如高度等）。这里的注意点，尽量避免在此处操作数据，以免陷入死循环中。
• beforeDestroy/destroyed：当前组件实例销毁前/销毁完成时触发。beforeDestroy主要用于手动清除全局事件以及销毁定时器等，在此处还可以调用组件的this；destroyed表示组件已经完成销毁，无法再调用相应的组件实例this。

组件内路由钩子

如果在应用中使用了Vue-Router插件，那么单组件中就会多出三个路由赋予的钩子函数，也称组件内路由守卫

• beforeRouteEnter：在调用路由后组件实例创建前触发。在此不能调用组件实例this，如果需要在此处访问实例数据或方法可以如下操作next(vm => {//在此访问})
• beforeRouteUpdate：在当前路由改变但组件被复用时触发。此处可以调用组件实例this，该钩子主要应用场景在于路由嵌套及路由组件复用时使用，可依赖此钩子函数在路由父组件中确定当前的路由子组件。
• beforeRouteLeave：在跳转下个路由地址前触发。此时可以访问当前路由组件实例this。该钩子主要应用场景在于用户离开前进行一些确认操作，假设用户只是误操作，则可以调用next(false)阻止跳转，详情可见Vue-Router官方文档。

插槽的使用

插槽指的是slot标签和配套的slot属性，先说一下对插槽的理解，顾名思义就是有个位置给你放东西。那么什么场景下会使用到slot呢？举个例子，我们需要做个标签组件，这时候就可以有两种选择：将要显示的文字作为prop传入，或者直接写在标签中间text。像后面这种形式就是子组件用slot的做法，看起来就会比较方便简洁。
那有的同学就有疑问了，要是用第一种做法也不是不行呀。对的，用前面的组件用第一种设计也未必不行，但现在加入有一个模态框组件设计，那么还会用第一种吗？显然处理起来很麻烦，并不是一个好的选择，这时候使用slot就会显得很方便，想要模态框里塞什么就塞什么，也可以先预设好特定的模版。当然，具体的使用就不展开，可以看官网API

mixins混入

前端的同学头一次接触估计会很迷惑，什么叫mixins混入？其实也不难理解，这就相当于把.vue文件中的script部分抽象出来使用。假设有多个视图组件用到了相同的一个data, method, components等等属性，但细微的处理上又有些不同，则可以把其相同的部分抽象出来成为一个mixins文件（其实就是.js文件），在组件中导入使用就好了。
mixins有全局和单组件两种形式，具体可以看文档，这里的注意点

• 谨慎用全局mixins
• mixins中的钩子可以和组件内的钩子重复，都会执行
• mixins中的钩子会比组件相同的钩子先执行

自定义指令

何谓指令，v-bind/v-if等就是指令。指令除了Vue提供的那些官方指令之外，还支持自定义。自定义指令有什么好处？举个例子，日常的业务开发通常会使用到loading组件，有时候需要全局，有时候需要出现在不同的div内loading，抛开指令的做法很麻烦，要先确定父级的元素才能插入loading部分；用回指令则会显得简洁许多，全局定义loading指令，利用指令的bind/inserted等相关钩子方法可以写得很简洁。

最后

.vue文件相关的基本就介绍完了，如果在这一方面有什么不理解的可以在评论进行留言，有时间会进行解答