vue使用心得（一）

为路径配置别名

开发过程中我们经常需要引入各种文件，如图片,css,js等等，为了避免写很长的相对路径，我们可以为不同的目录配置一个别名。

具体做法：在build文件夹下，修改webpack.base.config.js 中的 resolve 配置项，在 alias 中增加别名。如下图：

注意：在项目中使用别名时，如果不是通过 import 引入的则需要在别名前加上 ~

watch

watch是一个对象，键是需要监控的东西，$route就是监听路由的变化，或者也可以监听data中的某个变量值。

值可以是函数：监听的属性或值发生变化时要执行的函数，有两个参数，第一个是当前值，第二个是变化后的值。

值可以是函数名：函数名需要用单引号包裹。

值可以是包含选项的对象：

第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。

第二个是deep：其值是true或false；确认是否深入监听。可以监听到对象中属性的变化。

第三个是immediate：布尔值，确认是否以当前的初始值执行handler的函数。

immediate常见使用场景

1.组件创建时需要获取一次列表，同时监听data中的数据，数据发生变化时需要重新获取一次列表。

2.有很多组件共用一个公共组件，根据参数的不同渲染不同的数据。路由没有变化仅仅参数发生变化，created里面的方法只会执行一次，所以需要监听路由。

简单来说就是当create和watch中需要执行同一个方法时，使用起来会比较方便，代码看起来更加简洁。
复制代码

全局注册组件

一般情况下，我们使用组件时需要先import,然后在components中声明，可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。如果这种基础组件很多，代码会变得很繁琐。

简化方法：我们可以借助一下webpack，使用 require.context() 方法来创建自己的（模块）上下文，从而实现基础组件的自动化全局注册。

思路是：在src文件夹下面main.js中，借助webpack动态将需要的基础组件统统打包进来。

具体步骤

1.使用require.context()方法在main.js中全局导入相匹配的组件

2.遍历组件，获取组件的驼峰式命名

3.全局注册组件

注：这个过程要写在 new Vue()的前面

转载于:https://juejin.im/post/5bee79c6e51d4520b7711dfc