Vue第三天

一、vue计算属性-computed

• 计算属性使用场景：当变量的值，需要通过别人计算而得来时

• 语法：computed: { "计算属性名" () { return "值" } }

• 注意点：计算属性和data属性都是变量，不能重名；函数内使用的变量改变，重新计算结果返回

<template>
  <div>
    <h1>{{ num }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      a:10,
      b:20
    }
  },
  computed: {
    num(){
      return this.a + this.b
    }
  }
}  // 结果为：30
</script>

<style>

</style>

二、计算属性优势

• 计算属性优势：带缓存 计算属性对应函数执行后，会把return值缓存起来  依赖项不变，多次调用都是从缓存中取值  依赖项值-变化，函数会“自动”重新执行-并缓存新的值

<template>
  <div>
    <p>{{a}}</p>
    <p>{{a}}</p>
    <p>{{a}}</p>
    <p>{{b()}}</p>
    <p>{{b()}}</p>
    <p>{{b()}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg:'hello,vue'
    }
  },
  computed: {
    a(){
      console.log('计算属性被触发了');
      return this.msg.split('').reverse().join('')
    }
  },
  methods: {
    b(){
      console.log('函数被触发了');
      return this.msg.split('').reverse().join('')
    }
  }
}
// 结果是：计算属性被触发了   函数被触发了 3次
</script>

<style>

</style>

三、vue计算属性-完整写法

• 语法：

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

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

<script>
export default {
  computed: {
    full:{
      // set get 是固定写法
      set(val){
        console.log(val);
      },
      get(){
        return '坚果'
      }
    }
  }
}
</script>

<style>

</style>

四、vue侦听器的基本使用

• 可以侦听data/computed属性值改变
• 语法：

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

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

<script>
export default {
  data () {
    return {
      name:''
    }
  },
  watch: {
    //newVal当前新值  oldVal上一刻的值
    name(newVal,oldVal){
      console.log(newVal,oldVal);
    }
  }
}
</script>

<style>

</style>

五、vue侦听器-深度侦听和立即执行  

• 作用：可以侦听复杂数据类型
• 语法：

  watch: {
      "要侦听的属性名": {
          immediate: true, // 立即执行
          deep: true, // 深度侦听复杂类型内变化
          handler (newVal, oldVal) {
              
          }
      }
  }

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

<script>
export default {
  data () {
    return {
      user:{
        name:'',
        age:0
      }
    }
  },
  watch: {
    user:{
      handler(a,b){
        console.log(a,b);
      },
      deep:true,
      immediate:true
    }
  }
}
</script>

<style>

</style>

六、vue组件

• 组件的概念：是一个vue实例, 封装标签, 样式和JS代码
• 优点：便于复用，易于扩展
• 组件通信的类型：
  1. 父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值；
  2. 子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)

七、vue组件-scoped作用

• 作用：可以防止类名冲突

八、计算属性和侦听的区别以及使用场景

• watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作；
• omputed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算
• 计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。Watch也可以检测computed属性。