vue 生命周期钩子 过滤器 计算属性

每一个Vue实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测、编译模板、挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会。例如：created 这个钩子在实例被创建之后被调用：

过滤器

vue允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由‘管道’符指示：

in mustaches

{{message | upperCase}}

in v-bind

<div v-bind:id="rowId | formatId"></div>

过滤器函数总接受表达式的值作为第一个参数

过滤器是javaScript函数，因此可以接受参数：

{{message | filterA('arg1','arg2')}}

这里arg1将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数。

计算属性 computed

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

在这种情况下，模板不再简单和清晰。在意识到这是反向显示 message 之前，你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候，问题会变得更糟糕。

 

这就是对于任何复杂的逻辑，你都应当使用计算属性的原因。

demo:

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
结果：

Original message: "Hello"

Computed reversed message: "olleH"

这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage 的 getter .

console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'

你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。

而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 是没有副作用，这使得它易于测试和推理。你可以打开浏览器的控制台，自行修改例子中的 vm 。

vm.reversedMessage 的值始终取决于 vm.message 的值。