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

发布时间:2024年01月10日

本书目录:点击进入

一、监听器 -?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>

>??效果

文章来源:https://blog.csdn.net/ladymorgana/article/details/135478689
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。