Vue.js

生命周期钩子

1 beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2 create
在实例创建完成后被立即调用。
数据观测 (data observer)，property 和方法的运算，watch/event 事件回调，都已完成。
挂载阶段还没开始，$el property 目前尚不可用。

3 beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。

4 mount
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。

如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

mounted 不会保证所有的子组件也都一起被挂载。

若希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
 

该钩子在服务器端渲染期间不被调用。

5 beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6 update
数据更改之后导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当此钩子被调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。

updated 不会保证所有的子组件也都一起被重绘。

若希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

该钩子在服务器端渲染期间不被调用。

7 activted
被 keep-alive 缓存的组件激活时调用。
该钩子在服务器端渲染期间不被调用。

8 deactivated
被 keep-alive 缓存的组件停用时调用。
该钩子在服务器端渲染期间不被调用。

9 beforeDestroy
实例销毁之前调用。
在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。

10 destroy
实例销毁后调用。
该钩子被调用后，对应 Vue 实例变化：
所有指令都被解绑。
所有的事件监听器被移除。
所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。

11 errorCaptured
类型：(err: Error, vm: Component, info: string) => ?boolean

此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
当捕获一个来自子孙组件的错误时被调用。

此钩子可以返回 false 以阻止该错误继续向上传播。

数组侦听

div id="app">
        <button @click="list.push('真爱芬')">添加</button>
        <button @click="list.pop()">删除</button>
        <!-- 利用索引改变数组时 不能被侦听到 -->
        <!-- <button @click="list[0] = '修猫' ">修改第一个</button>
        <button @click="list.splic(1,0,'假爱芬')">第二项添加</button> -->
        <ul>
            <li v-for="item in list">
                {{ item }}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['ikun','kkun','zhenikun','jiaikun']
            },
            watch:{
                // 复杂数据类型 这两个参数没有意义 因为地址没变
                // 所以复杂类型中 一般不会写这两个参数 这两个参数的值是一样的
            list(newVal,oldVal){
                console.log('数组改变了',oldVal,newVal);
            }}
        })
        // 在数组中使用侦听器：
        // 彻底替换为一个新数组 可以被侦听到
        // 使用了push()等标准的数组操作方法 可以被侦听到
        // 直接修改了数组的元素 无法被侦听到
        // 解决方法:使用$set()方法修改元素的值，
        // 不要使用length属性修改数组长度，而改用其他标准方法显示数组长度的变化
    </script>