Vue2入门小结

Vue2入门小结

最近写了几个页面，本来用JQ很好写的，但是本着学习的目的，强行用了下Vue，虽然一路踩坑，但是也学到了点东西，尤其是对组件还有路由等这块有了比较清晰的了解。。这里记录下关于这几天使用vue2的一些小结

---

• 我是用了vue-resource请求数据，用vue-router操作路由。。加载后用Vue.use扩展这两个组件后然后就能在vue组件里全局使用了，不过有个坑就是用npm下载后的vue路径引入可能会有问题。
  在组件里面用this.$router.push({name:”, query:{}})操作可以实现路由切换，然后this.$route的方法可以获取当前路由带上的参数。路由还有个钩子函数，在组件里 beforeEnter:(to,from,next) => {}用这个方法就可以知道当前路由是从哪个路由跳过来的，next()函数代表继续访问当前路由，这里要是想动态改变页面的title的话，可以在这个路由钩子里面写上document.title = ”，(PS:估计还有更好的办法，但是我今天就是这样解决每个路由title的问题)
• 在router-view上面加上keep-alive就可以使组件不用每次都重新加载了，这个方法还是挺好的，当从A路由跳转到B路由，然后在返回到A路由，我们想得到上次A路由跳转B路由的那个时候的转态，要是不加这个的话A路由可能又重新走一遍了（也可以解决数据重复请求的问题），这里据说可以甩vuex来管理，但是我这个项目实在太小了，就没用这个。但是加了这个又会出现新的问题了，就是我们有时候又想某个组件的数据要一直请求，这个时候就要用到acticated这个组件的生命周期的方法了，就算加了keep-alive这个方法还是一直会执行的。
• 还有一个用的比较多的就是父子组件之间通信的问题，用props传递数据，vue2不支持在子组件里修改父组件传递的值了，它提供了一个this.$emit(‘increment’, data)回调方法。每次想改父组件的值得话，用这个函数在回调到父组件中修改，这里我感觉子组件最后用来展示数据，数据源还是从父组件里获取的好，不然想维持子组件的转态的话真的有点麻烦。。利用JS对象引用的特性可以用来保存一些全局的值（有时候不想用localstorage）。
• 也发现vue2有好多坑的里面，比方说我在data里面绑定了一个arr数组，然后我赋值arr[0] = 3，想把我改后的值在视图层表现出来，试了好久没反应之后才知道vue2对这种直接赋值的数组是监听不到它的改变，后来改成对象的属性就解决了，数组要想监听最好是用push的方式添加。

用vue2写页面还是比较爽的，不过也有麻烦的地方，每次提交代码的时候都得用webpack打包一份，有点浪费时间