【Vue3】2-7 : 计算属性与侦听器区别与原理（二）

本书目录：点击进入

一、监听器 - watch: {}

1.1 目的

1.2 应用场景

1.3 语法

二、计算属性和侦听器的区别

三、实战

示例1：已知 n1=3 ，n2=4 求 n3 = n1 * n2 ，改变n1,n2,求n3

＞  代码 - 计算属性

＞  代码 - 监听器

＞  效果

示例2：已知 n3 求 n1 和 n2

＞  代码

＞  效果

---

一、监听器 - watch: {}

        虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。

1.1 目的

• 用来 观察和响应 Vue实例上的数据变动

• 类似于临听机制+事件机制

1.2 应用场景

        当有一些数据需要随着其它数据变化而变化时,就可以使用侦听器。

1.3 语法

<div id="app">
    {{ message }}
</div>
<script>
    let vm = Vue.createApp({
        data(){
            return {
                message: 'hello'
            }
        },
        watch: {
            message(newVal, oldVal){
            }
        }
    }).mount('#app')
</script>

二、计算属性和侦听器的区别

	监听器	计算属性
函数	已知x,y,z...，求 f（x,y,z...）	已知f（x,y,z...），求 x,y,z...
异步	支持	不支持

• 计算属性适合：多个值去影响一个值的应用；而侦听器适合：一个值去影响多个值的应用

• 侦听器支持异步的程序，而计算属性不支持异步的程序

三、实战

示例1：已知 n1=3 ，n2=4 求 n3 = n1 * n2 ，改变n1,n2,求n3

总结：该场景计算属性比监听器更加简便

＞  代码 - 计算属性

  <div id="app">
    {{ n1 }} * {{ n2 }} = {{ n3 }}
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          n1: 3,
          n2: 4
        }
      },
      computed: {
        n3(){
          return this.n1 * this.n2;
        }
      }
    }).mount('#app');

    setTimeout(()=>{
      vm.n1 = 5;
    }, 2000)

  </script>

＞  代码 - 监听器

   <div id="app">
    {{ n1 }} * {{ n2 }} = {{ n3 }}
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          n1: 3,
          n2: 4,
          n3: 12
        }
      },
      watch: {
        n1(newVal, oldVal){
          this.n3 = newVal * this.n2;
        },
        n2(newVal, oldVal){
          this.n3 = newVal * this.n1;
        }
      }
    }).mount('#app');

    setTimeout(()=>{
      vm.n1 = 5;
    }, 2000)

＞  效果

示例2：已知 n3 求 n1 和 n2

＞  代码

  <script>

    let vm = Vue.createApp({
      data(){
        return {
          n1: 3,
          n2: 4,
          n3: 12
        }
      },
      watch: {
        n3(newVal, oldVal){
          let ret = [];
          for(let i=1;i<=newVal;i++){
            if( newVal%i === 0 ){
              ret.push([i, newVal/i]);
            }
          }
          let now = ret[ Math.floor(Math.random()*ret.length) ];
          this.n1 = now[0];
          this.n2 = now[1];
        }
      }
    }).mount('#app');

    setTimeout(()=>{
      vm.n3 = 20;
    }, 2000)

  </script>

＞  效果