P4. vue3 计算属性和侦听器

计算属性

<script>
export default{
  data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{ //计算属性 ，只要依赖值不变就不会重新计算。
    reverseMsg:function (){
      console.log("计算属性")
      return this.test57.split('').reverse().join('')
    }
  },
  methods:{
    reverseMessage:function (){
      console.log("methods")
      return this.test57.split('').reverse().join('')
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>----下方为计算属性---</p>
<!--    连（）都不需要加-->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>----下方为methods----</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>


  </div>

</template>



<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }
  .d1{
    font-size: 50px;
  }


</style>

computed只执行1次（只要依赖值不变，就不会重新计算而冲缓存中获取）
methods执行3次

计算属性修改原始值

<script>
export default{
  data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{ //计算属性 ，只要依赖值不变就不会重新计算。
    reverseMsg:function (){
      console.log("计算属性")
      return this.test57.split('').reverse().join('')
    }
  },
  methods:{
    reverseMessage:function (){
      console.log("methods")
      return this.test57.split('').reverse().join('')
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>----下方为计算属性---</p>
<!--    连（）都不需要加-->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>----下方为methods----</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <button @click="test57='hellokugou'">改变test57</button>


  </div>

</template>



<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }
  .d1{
    font-size: 50px;
  }


</style>

computed 会比 methods 提高了性能

计算属性 Setter

<script>
export default{
  data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{ //计算属性 ，只要依赖值不变就不会重新计算。
    // reverseMsg:function (){
    //   console.log("计算属性")
    //   return this.test57.split('').reverse().join('')
    // }
    reverseMsg:{ //每一个计算属性中都一个getter，setter,上面为简写，下面为完整版,计算属性为只读属性。
      set:function (newValue){ //设置或更改计算属性时使,一般没有set方法
        console.log(newValue)

      },
      get:function (){
        return this.test57.split('').reverse().join('')
      }
    }
  },
  methods:{
    reverseMessage:function (){
      console.log("methods")
      return this.test57.split('').reverse().join('')
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>----下方为计算属性---</p>
<!--    连（）都不需要加-->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>----下方为methods----</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <button @click="test57='hellokugou'">改变test57</button>
    <button @click="reverseMsg='hellokugou'">改变reverseMessage</button>


  </div>

</template>



<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }
  .d1{
    font-size: 50px;
  }


</style>

给setter 赋值

<script>
export default{
  data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{ //计算属性 ，只要依赖值不变就不会重新计算。
    // reverseMsg:function (){
    //   console.log("计算属性")
    //   return this.test57.split('').reverse().join('')
    // }
    reverseMsg:{ //每一个计算属性中都一个getter，setter,上面为简写，下面为完整版,计算属性为只读属性。
      set:function (newValue){ //设置或更改计算属性时使,一般没有set方法
        console.log(newValue);
        this.test57=newValue
      },
      get:function (){
        return this.test57.split('').reverse().join('')
      }
    }
  },
  methods:{
    reverseMessage:function (){
      console.log("methods")
      return this.test57.split('').reverse().join('')
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p>----下方为计算属性---</p>
<!--    连（）都不需要加-->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>
    <p>----下方为methods----</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>
    <button @click="test57='hellokugou'">改变test57</button>
    <button @click="reverseMsg='你好酷狗'">改变reverseMessage</button>


  </div>

</template>



<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }
  .d1{
    font-size: 50px;
  }


</style>

监听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<script>
export default{
  data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{
  },
  methods:{
  },
  watch:{//监听数据变化
    test57:function (newValue,oldValue){//值的变量名可以自定义
      console.log(newValue);
      console.log(oldValue);
   //此处可以搞一些异步操作等
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <button @click="test57='你好kugou'">改变test57</button>
  </div>

</template>



<style>


</style>

监听器 双向绑定实例

<script>
export default{
  data(){
    return{
      test57: '57-6666',
      test56: 56

    }
  },
  computed:{
  },
  methods:{
  },
  watch:{//监听数据变化
    test57:function (newValue,oldValue){
      console.log(newValue);
      console.log(oldValue);
      //此处可以搞一些异步操作等
      if(newValue.length <5 || newValue.length>10){
        console.log("输入框 str not <5 or >10")
      }
    }
  },
};
</script>


<template>
  <div>
    <p>{{test57}}</p>
    <button @click="test57='你好kugou'">改变test57</button>
    <!-- v-model:数据都双向绑定-->
    <input type="text" v-model="test57">


  </div>

</template>



<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }
  .d1{
    font-size: 50px;
  }


</style>

watch 属性 immediate

<script>
export default {
  data() {
    return {
      test57: '57',
      test56: 56

    }
  },
  computed: {},
  methods: {},
  watch: {//监听数据变化
    // test57:function (newValue,oldValue){
    //   console.log(newValue);
    //   console.log(oldValue);
    //   //此处可以搞一些异步操作等
    //   if(newValue.length <5 || newValue.length>10){
    //     console.log("输入框 str not <5 or >10")
    //   }
    // }
    test57: {
      immediate: true,
      handler: function (newValue) {
        console.log(newValue)
        if (newValue.length < 5 || newValue.length > 10) {
          console.log("输入框 str not <5 or >10")
        }
      },
    },
  },
};
</script>


<template>
  <div>
    <p>{{ test57 }}</p>
    <button @click="test57='你好kugou'">改变test57</button>
    <!-- v-model:数据都双向绑定-->
    <input type="text" v-model="test57">


  </div>

</template>


<style>
#d1 {
  color: red;
}

#d2 {
  color: blue;
}

.d1 {
  font-size: 50px;
}


</style>

watch对 对象进行监听

<script>
export default {
  data() {
    return {
      test57: '57',
      test56: 56,
      user: {
        name: 'kugou'
      }

    };
  },
  computed: {},
  methods: {},
  watch: {//监听数据变化
    // test57:function (newValue,oldValue){
    //   console.log(newValue);
    //   console.log(oldValue);
    //   //此处可以搞一些异步操作等
    //   if(newValue.length <5 || newValue.length>10){
    //     console.log("输入框 str not <5 or >10")
    //   }
    // }
    test57: {
      immediate: true,
      handler: function (newValue) {
        console.log(newValue)
        if (newValue.length < 5 || newValue.length > 10) {
          console.log("输入框 str not <5 or >10")
        }
      },
    },
    //监听不到对象都属性变化，所以需要深度监听
    // user:function (newValue){
    //   console.log(newValue);
    //
    // },
    // user:{
    //   handler:function (newVale){
    //     console.log(newVale);
    //   },
    //   deep:true,//深度监听，监听器会一层层向下监听，给每一个对象都加上监听器
    // }
    "user.name":{//使用字符串的监听，只会侦听你想要的
      handler:function (newVale){
        console.log(newVale);
      },
      deep:true,//深度监听
    }
  },
};
</script>


<template>
  <div>
    <p>{{ test57 }}</p>
    <button @click="test57='你好kugou'">改变test57</button>
    <!-- v-model:数据都双向绑定-->
    <input type="text" v-model="test57">
    <p>{{user.name}}</p>
    <button @click="user.name='sir'">changename</button>


  </div>

</template>


<style>
#d1 {
  color: red;
}

#d2 {
  color: blue;
}

.d1 {
  font-size: 50px;
}


</style>