vue-计算属性与钩子函数

计算属性

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

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

• 在这个地方，模板不再是简单的声明式逻辑。
• 你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。
• 当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

computed

• 类型：{ [key: string]: Function | { get: Function, set: Function } }
• 详细：
  • 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
• 注意：如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

computed: {
  aDouble: vm => vm.a * 2
}

• 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。

• 注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

• 示例：

html:
    <div id="app">
        <h1>{
  {message}}</h1>
        <p>{
  {message}} 中“小”的个数为 {
  {wordNum}}</p>
        <input type="text" v-model="message">
    </div>
js:
	<script>
        /*
        计算属性 需求 ： 计算message里面小的个数
        如果数据发送改变就会重新进行计算

        注意点 ： 
            1.计算属性里面使用到的值必须跟data里面的数据一致
            2.计算属性中的data里面拿到数据发送变化 就会重新计算
            3.在什么时候使用？当数据必须经过计算才能得到 并且必须依赖于data里面的数据 那么就可以使用计算属性
        */
        var app = new Vue({
    
            el:'#app',
            data:{
    
                message : "小辣椒"
            },
            computed: {
    
                // 计算message中小的个数
                wordNum(){
    
                    //声明一个变量保存个数
                    let num = 0;
                    //遍历 添加
                    for(let i<