笔记：vue相关重点

1.内部监听生命周期函数

在Vue组件中，可以用过$on,$once去监听所有的生命周期钩子函数，如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})。

2.外部监听生命周期函数

<template>
  <!--通过@hook:updated监听组件的updated生命钩子函数-->
  <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
  <custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {
  components: {
    CustomSelect
  },
  methods: {
    $_handleSelectUpdated() {
      console.log('custom-select组件的updated钩子函数被触发')
    }
  }
}
</script>

3.Vuex替代方案---Vue.observable（小项目使用Vuex太累赘）

（1）创建store

import Vue from 'vue'

// 通过Vue.observable创建一个可响应的对象
export const store = Vue.observable({
  userInfo: {},
  roleIds: []
})

// 定义 mutations, 修改属性
export const mutations = {
  setUserInfo(userInfo) {
    store.userInfo = userInfo
  },
  setRoleIds(roleIds) {
    store.roleIds = roleIds
  }
}

（2）在组件中引用

<template>
  <div>
    {{ userInfo.name }}
  </div>
</template>
<script>
import { store, mutations } from '../store'
export default {
  computed: {
    userInfo() {
      return store.userInfo
    }
  },
  created() {
    mutations.setUserInfo({
      name: '张三'
    })
  }
}
</script>

4.深度watch与watch立即触发回调

（1）watch立即触发回调：

export default {
  watch: {
    // 在值发生变化之后，重新加载数据
    searchValue: {
    // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          //加载数据
        }
      },
      // 配置立即执行属性
      immediate: true
    }
  }
}

（2）深度监听

watch: {
    // 在值发生变化之后，重新加载数据
    formData: {
      // 需要注意，因为对象引用的原因， newValue和oldValue的值一直相等
      handler(newValue, oldValue) {
        // 在这里标记页面编辑状态
      },
      // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
      deep: true
    }

5.函数式组件

export default {
  // 通过配置functional属性指定组件为函数式组件
  functional: true,
  // 组件接收的外部属性
  props: {
    avatar: {
      type: String
    }
  },
  /**
   * 渲染函数
   * @param {*} h
   * @param {*} context 函数式组件没有this, props, slots等都在context上面挂着
   */
  render(h, context) {
    const { props } = context
    if (props.avatar) {
      return <img src={props.avatar}></img>
    }
    return <img src="default-avatar.png"></img>
  }
}

（1）为什么使用函数式组件

函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件；

函数式组件结构比较简单，代码结构更清晰

（2）函数式组件与普通组件的区别

函数式组件需要在声明组件是指定functional；

函数式组件不需要实例化，所以没有this,this通过render函数的第二个参数来代替；

函数式组件没有生命周期钩子函数，不能使用计算属性，watch等等；

函数式组件不能通过$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件；

因为函数式组件是没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement ；

函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都被解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)；

另：在Vue2.5之前，使用函数式组件只能通过JSX的方式，在之后，可以通过模板语法来生命函数式组件

<!--在template 上面添加 functional属性-->
<template functional>
  <img :src="avatar ? avatar : 'default-avatar.png'" />
</template>
<!--函数式组件的props可以不用显示声明，所以可以省略声明props-->

6.created与mounted区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

created中主要用来初始化 / 获取数据之类，mounted()中挂载到具体的DOM节点。

补充1：请求初始化数据一般放在created中即可，如果你有用keep-alive缓存组件的情况下，比如有些数据你只需加载一次的就放在created，需要根据一些参数重复加载的最好写方法然后放在mounted。请求数据太复杂，太多也可以放在mounted中。

引用：http://www.mamicode.com/info-detail-2848817.html          https://www.jianshu.com/p/ff8f9bbc7551

补充2：如果你修改了某个dom中的数据，视图并不会立即更新。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。，此时获取关于此dom的一切操作都是无效的，怎么办？在nextTick的回调中执行即可。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

7.es6删除对象指定属性后获得新的对象 

const obj = { a: 1, b: 2, c: 3 }

// 方法一
const new = (({a, c}) => ({a, c}))(obj)
console.log(new) // new = { a: 1, c: 3 }

// 方法二
const { b, ...new } = obj
console.log(new) // new = { a: 1, c: 3 }

const new = (() => {
    const { b, ...new } = obj
    return new
})(obj)
console.log(new) // new = { a: 1, c: 3 }

引文：实战技巧，Vue原来还可以这样写 - 掘金