vue 学习笔记

最近使用vue做项目，碰到一些坑，顺带不少理解，以博文形式记录下来。

vue生命周期

1. beforeCreate vue实例完成初始化事件和生命周期，但方法还没有声明，此阶段调用this.methodName会报错。

2. created vue实例已经创建完成，所有的数据与方法都可以使用。

3. beforeMounted vue实例根据数据和el和template属性生成渲染树，但是并没有替换网页中的el元素。

4. mounted 完成与el元素的替换，网页已经呈现在用户面前。

5. beforeUpdate 当数据改变，在更新之前处理。

6. updated  更新完成，页面已经更新之后处理。

7. beforeDestroy vm.$destroy被调用之后，销毁之前处理。

8. destroyed 销毁完成之后。

var instance = new Vue({el: '#app',template: '<p>this is a test</p>',methods: {test: function() {console.log('methods');}},beforeCreate: function() {console.log('beforeCreate');this.test();},created: function() {console.log('created');this.test();}});

注意：不要在上述的的属性值中使用箭头函数，箭头函数中的this值是遵循词法作用域的规则的，在箭头函数中使用this可能会出现与预期不符的效果。相关内容可以查看vJavaScript执行环境、作用域及this值

element-ui 分页组件

假设组件最大页数为a，若置其当前页为大于a的页码，则其会显示最大的页码，并且触发indexChange事件。

vue-router

vue-router在vue2.0中有一个特性，就是当push本页路由时（query参数不同），并不会发生刷新操作，需要自己监控路由发生变化。

刷新：router.go(0);

回退：router.back(-1);

beforeRouteEnter

这个是插件vue-router的钩子，作用是：在路由进入之前调用此钩子函数处理数据，这是一个同步的设计，在显示调用参数函数next之前，不会进行vue组件的实例化和渲染。其有三个参数：to, from, next。to是需要转到的路由，from是离开的路由，next是个函数，调用其以进入下一状态。需要注意的是，不调用next，则不会进行vue的实例化和渲染，同时，调用next之后，并非是退出这个这个钩子处理函数，即此函数依旧会继续运行，直至结束。

当需要先一步请求数据再渲染数据（例如先获取登录状态再决定渲染数据）的同步场景来说，这个钩子非常有用！

axios

在vue框架中，如果需要使用ajax来请求异步数据，则一般会使用axios来请求数据，但是axios不是当成一个中间件来使用的，即Vue.use(axios)这种方式在webpack打包出来之后会出现"protocol is not defined"类似的错误。正确的使用方法应该是

Vue.prototype.$ajax = axios;

element ui的条件渲染

在使用v-if和v-show对element ui组件进行条件渲染时，发现了一个小小的问题。当判断条件是一个字面量变量的时候，会根据我们的条件的布尔值来渲染，这个是跟正常的逻辑相符合的。但是当判断条件为一个对象的属性时，即v-if="obj.attrName"，除了首轮渲染会得到预期效果，在运行中改变obj.attrName时，并不会更新界面，主要是obj是一个引用类型，其vue更新是根据obj的地址去查看是否改变以决定是否更新。

v-for的双向数据绑定

使用v-for来进行双向数据绑定的时候，例如

v-for="item in arr"

那么使用item的值进行双向数据绑定时（v-model="item"）千万得注意，只改变item的值时，页面是无法更新的，因为vue是否更新页面是通过arr的地址来判断，当arr的地址变化时才会更新页面。

子组件props传值

父子组件通过props来传递数据的时候，如果传递的值为组件挂载之后异步获取的，则会传一个空数据或者undefined到子组件