Vue计算属性、监视、生命周期、钩子函数

计算属性

将属性计算的过程封装到一个函数中，使用计算属性是会自动调用函数，函数的返回值就是计算属性的值
优点：
可维护性高
计算属性比直接用调用函数来使用性能要高（有缓存）
只有相关的属性发生了变化才会重新计算

基本使用

var vm = new Vue({
      el: '#app',
      data: {
        n1:'',
        n2:''
      },
      //n3依赖与n1和n2的值，当n1 和 n2发生改变的时候，这个函数就会执行。
    	//返回值就是n3的值
      computed: {
        n3(){
          return +this.n1 + +this.n2;
        }
      }
    });

计算属性是基于它们的依赖项进行缓存的

如果页面中需要使用多次计算属性的值，只会计算一次，计算属性只有在它的相关依赖发生改变时才会重新求值。

计算属性不能与data中的属性同名，因为无论是data中的属性还是计算属性，最终都是挂载到vm上的

完整形式

// 上面的计算属性只设置了getter而没有setter，所以在赋值时会报错
var vm = new Vue({
      el: '#app',
      data: {
        n1:'',
        n2:''
      },
      computed: {
        n3: {
          get() {
            return +this.n1 + +this.n2;
          },
          set(value) {
            this.n2 = value - +this.n1;
          }
        }
      }
    });

watch监视数据的变化

vue实例中提供了一个watch属性，用于监听vue实例中的属性的变化。
watch对应了一个对象，键是观察的属性，值是对应的回调函数。

基本使用

基本使用

// watch对象: 用于监视数据的变化
watch: {
  监视的数据对象: function(当前值, 上一次的值) {
    dosomething...
  }
}

表单校验效果

watch: {
    // 监视msg，只要msg属性的值发生改变，function就会执行
    // value: 当前值  oldValue:上一次的值
    msg: function(value) {
        if (value.length >=3 && value.length <= 6) {
            this.tips = '正确'
        } else {
            this.tips = '密码格式不正确'
        }
    }
}

监视对象

监视对象的时候，需要加上deep: true
为了发现对象内部值的变化，可以在选项参数中指定 deep: true

如果是一个对象，无法监听到对象内部值的变化

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      user: {
        name:'zs',
        age: 18
      }
    },
    watch: {
      user: function(newValue, oldValue) {
        console.log(newValue, oldValue);
        // 侦听不到
      }
    }
  });
</script>

<input type="text" v-model="user.name">
<input type="text" v-model="user.age">

对象需要加上deep（数组不需要），同时会多消耗一些性能，参考 https://cn.vuejs.org/v2/api/#vm-watch

watch: {
  user: {
    deep: true,
    handler: function(newValue, oldValue) {
    // 注意：如果监听的是对象，新值与旧值都是【相同的】，因为指向了同一个对象。
    // 获取的newValue是整个对象
    console.log(newValue.age, newValue.name);
    }
  }
}

immediate 属性，页面刚加载就执行一次

watch: {
  user: {
    deep: true,
    immediate:true,
    handler: function(curr, old) {
      console.log(curr.age, curr.name);
    }
  }
}

生命周期与钩子函数

生命周期介绍

vue生命周期钩子函数
简单说：一个实例从开始到最后消亡所经历的各种状态，就是一个实例的生命周期

实例生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数

生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为
注意：vue在执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
注意：钩子函数的名称都是固定的

1. vue的初始化阶段
①创建vue实例
②基本初始化：初始化生命周期和时间
③初始化数据：
a. 注入：将data中的数据，注入到vm实例身上
b. 响应式：利用defineProperty进行数据劫持，实现数据响应
④指定视图
a. 若指定el，则以el为视图
b. 若不指定el，则等待vm.$mount函数的调用指定视图
⑤指定模板
a. 如果没有配置template，就会将el的outerHTML作为模板
b. 如果制定了template，就会无视el将template作为模板
⑥将模板和数据相结合，生成结构，用这个结构替换el视图

2. vue的数据更新阶段
如果数据发生了变化，那么使用虚拟dom进行差异化更新（尽可能复用之前的结构）

3. vue实例销毁阶段
只要vm.$destroy方法被调用，vue实例就会被销毁。同时释放掉与vue相关的一些资源，事件监听，子组件等。之后data中的数据再变化就不会更新视图了

钩子函数 - beforeCreate()

说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
vue实例生命周期参考1
vue实例生命周期参考2
使用场景：发送请求获取数据

钩子函数 - beforeMounted()

说明：在挂载开始之前被调用

钩子函数 - mounted()

说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()

说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

钩子函数 - updated()

说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeDestroy()

说明：实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

钩子函数 - destroyed()

说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

过滤器

过滤器可以将处理字符串的过程封装，以便将来复用。多用于处理时间戳（moment插件）。

1. 定义过滤器

Vue.filter(过滤器的名字, function(value) {
    // 在这里处理字符串
    return 返回的结果
})
参数一：过滤器的名字
参数二：字符串的处理函数，返回的结果作为使用过滤器的结果

2. 使用过滤器

1	{{ msg \| 过滤器名字 }}

3. 过滤器可以被传参

// 使用
{{ msg | 过滤器名字(param1, param2, ...) }}
/*
  // 参数一：msg，待处理的字符串
  // 参数二、三：param1，传入的参数，可以在回调函数中使用
*/

// 定义
Vue.filter(过滤器的名字, 回调函数function(value, param1 = 默认值, ...) {
    return 返回的结果
})

4. 全局过滤器和局部过滤器

全局过滤器：在全局中使用 Vue.filter(...)

局部过滤器：在创造实例中使用（和data，methods等相同）

filters: {
    filter1(value) {
        return ...
    }
}