Vue学习笔记

eslint中expected "indent", got "eos" 在写stylus时碰到这种问题，肯定是由于编辑器使用了不一样的缩进方式，需要进行设置即可。因为他在你的编辑器中可能是对齐了的，但是实际并没有。 stylus mixin只可以为样式提供函数的功能

虽然可以设置vue中的样式为scoped模式但是在组件和公用组件中不要起相同的样式名以免污染

vue生命周期

1.beforeCreate（初始化之后）
2.created（创建完成）
3.beforeMount（挂载之前）
4.mounted（被创建）
5.beforeUpdate（数据更新时调用，发生在虚拟 DOM 打补丁之前）
6.updated（虚拟 DOM 重新渲染和打补丁后调用）
7.activated（keep-alive 组件激活时调用）
8.deactivated（keep-alive 组件停用时调用）
9.beforeDestory（销毁前）
10.destoryed（销毁后）
11.errorCaptured（当捕获一个来自子孙组件的错误时被调用）

双向绑定

自定义组件双向绑定

  // 发送input事件
  this.$emit('input',this.val);

当某个响应式数据发生变化的时候，它的setter函数会通知闭包中的Dep，Dep则会调用它管理的所有Watch对象。触发Watch对象的update实现。

update () {
    /* istanbul ignore else */
    if (this.lazy) {
        this.dirty = true
    } else if (this.sync) {
        /*同步则执行run直接渲染视图*/
        this.run()
    } else {
        /*异步推送到观察者队列中，下一个tick时调用。*/
        queueWatcher(this)
    }
}

我们发现Vue.js默认是使用异步执行DOM更新。当异步执行update的时候，会调用queueWatcher函数。

/*将一个观察者对象push进观察者队列，在队列中已经存在相同的id则该观察者对象将被跳过，除非它是在队列被刷新时推送*/
export function queueWatcher (watcher: Watcher) {
  /*获取watcher的id*/
  const id = watcher.id
  /*检验id是否存在，已经存在则直接跳过，不存在则标记哈希表has，用于下次检验*/
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      /*如果没有flush掉，直接push到队列中即可*/
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i >= 0 && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(Math.max(i, index) + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}

查看queueWatcher的源码我们发现，Watch对象并不是立即更新视图，而是被push进了一个队列queue，此时状态处于waiting的状态，这时候会继续会有Watch对象被push进这个队列queue，等待下一个tick时，这些Watch对象才会被遍历取出，更新视图。同时，id重复的Watcher不会被多次加入到queue中去，因为在最终渲染时，我们只需要关心数据的最终结果。

radio

// html代码



// vue中代码
data () {
    index: 0 // index取值为value中的值，初始化为0时可默认选中第一个
}

vue-router2.0

重定向

routes: [
  {
      path:'/',
      redirect:{'/', 'goods'}
  }
]

不再是1.0中的.go()

Axios

在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里

使用emit来发送广播

vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。比如想要给test组件发送一个“相加”广播:

export default {
  method: {
    click () {
      Vue.$emit('add',{}) //第二个参数可作为传递数据传送到监听端口，不需要则传空对象
    }
  }
}

那么test组件中就需要监听，在created方法里写

export default {
  created () {
     Vue.$on('add', this.add)
  },
  method: {
     add () {
        this.count++
     }
  }
}

keep-alive

1.普通用法

2.缓存部分页面或者组件
(1)使用router.mate属性

// 这是目前用的比较多的方式

route.js设置

  routes: [
    { path: '/', redirect: '/index',  component: Index, meta: { keepAlive: true }},
    {
      path: '/common',
      component: TestParent,
      children: [
        { path: '/test2', component: Test2, meta: { keepAlive: true } } 
      ]
    }
    ....
    // 表示index和test2都使用keep-alive

(2) 2.1.0后提供了include/exclude两个属性可以针对性缓存相应的组件



    



    



    

// 其中a,b是组件的name,如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。
// 匿名组件不能被匹配。

注意:这种方法都是预先知道组件的名称的