vue计算属性

如果一个数据，其值依赖其他数据计算后的结构，那么就应该以计算属性来设置 在模板中放入太多的逻辑会让模板过重且难以维护

语法

export default {
//其他代码
computed: {
    "计算属性名" () {
        return "值"
    }
}
}

简单的计算属性例子

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
 // 注意: 计算属性和data属性都是变量-不能重名
 // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

计算属性在功能上和函数没有什么区别

• 不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数
• 使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存

计算属性的完整写法

计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

语法

computed: {
    "属性名": {
        set(值){
        },
        get() {
            return "值"
        }
    }
}

<template>
  <div>
      <div>
          <span>姓名:</span>
          <input type="text" v-model="full">
      </div>
  </div>
</template>

<script>
/*
    完整语法:
    computed: {
        "计算属性名": {
            set(值){
            },
            get(){
                return 值
            }
        }
    }
*/
export default {
    computed: {
        full: {
            // 给full赋值触发set方法 例如v-model 在表单内填写
            set(val){
                console.log(val)
            },
            // 使用full的值触发get方法
            get(){
                return "无名氏"
            }
        }
    }
}
</script>

计算属性传参

vue中computed计算属性无法直接进行传参
如果有传参数的需求比如说做数据筛选功能可以使用闭包函数（也叫匿名函数）实现

<tr v-for="item,index in arr" :key="index">
<td>
   {{sum(index)}}
</td>
<tr>
computed:{
    sum(){
      return index=> this.goodList[index].price*this.goodList[index].num
    }
  }

vue侦听器

侦听器在数据发生变化时触发，侦听data/computed属性值发生改变

语法

watch: {
    "被侦听的属性名" (newVal, oldVal){
    }
}

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

深度侦听（deep）和立即执行（immediate）

watch: {
    "要侦听的属性名": {
        immediate: true,  // 立即执行,在页面刷新时就执行
        deep: true,             // 深度侦听复杂类型内部数据的变化
        handler (newVal, oldVal) {

        }
    }
}