Vue3 で計算プロパティとリスナーを使用する方法

計算されたプロパティ

データ内の一部のデータは、テンプレート内の補間構文を通じて直接表示できることはわかっていますが、場合によっては、データを表示する前にデータに対して何らかの変換を実行する必要がある場合があります。複数のデータを結合して表示する必要がある

テンプレートで式を使用すると非常に便利ですが、元々は単純な操作用に設計されているため、テンプレートにロジックを入れすぎるとテンプレートが重くなり、メンテナンスが困難になります複数の場所で使用される場合、重複コードが大量に発生するため、ビジネス ロジックと UI インターフェイスを分離したいと考えています。ロジックをメソッドに抽出することも 1 つの方法ですが、このアプローチは次の欠点があります。

すべてのデータ使用プロセスがメソッド呼び出しになります
複数の取得データを実行するにはメソッドを複数回呼び出す必要がありますキャッシュなしの対応するロジック

• ##実際、
応答性の高いデータを含む複雑なロジックの場合は、計算されたプロパティを使用する必要があります

<div id="app">
  <!-- 计算属性的使用和普通状态的使用方式是一致的 -->
  <h3 id="nbsp-fullname-nbsp">{{ fullname }}</h3>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        firstname: &#39;Klaus&#39;,
        lastname: &#39;Wang&#39;
      }
    },
    computed: {
      fullname() {
        return this.firstname + &#39; &#39; + this.lastname
      }
    }
  }).mount(&#39;#app&#39;)

キャッシュ

計算されたプロパティは、その依存関係に基づいてキャッシュされます。データが変更されない場合、計算されたプロパティは再計算する必要はありません。

ただし、依存データが変更された場合、計算されたプロパティは引き続き再計算されます。使用すると、

#そしてインターフェイスは最新の計算されたプロパティ値を使用して再レンダリングされます

#ゲッターとセッター

計算されたプロパティ ほとんどの場合、必要なゲッター メソッドは 1 つだけです。そのため、計算されたプロパティを関数として直接記述します。

<div id="app">
  <!-- 计算属性的使用和普通状态的使用方式是一致的 -->
  <h3 id="nbsp-fullname-nbsp">{{ fullname }}</h3>
  <button @click="change">change</button>
</div>
<script>
  Vue.createApp({
    data() {
      return {
        firstname: &#39;Klaus&#39;,
        lastname: &#39;Wang&#39;
      }
    },
    methods: {
      change() {
        this.fullname = &#39;Alex Li&#39;
      }
    },
    computed: {
      // 计算属性的完整写法
      fullname: {
        get() {
          return this.firstname + &#39; &#39; + this.lastname
        },
        set(v) {
          this.firstname = v.split(&#39; &#39;)[0]
          this.lastname = v.split(&#39; &#39;)[1]
        }
      }
    }
  }).mount(&#39;#app&#39;)
</script>

Listener

は、データによって返されるオブジェクトで定義されます。 データは、補間構文などを通じてテンプレートにバインドされます。 データが変更されたとき、テンプレートは自動的に更新され、最新のデータが表示されます。

ただし、場合によっては、コード ロジックで特定のデータの変更を監視するには、この時点でリスナー ウォッチを使用する必要があります。

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // 可以使用watch监听响应式数据的改变
    // 对应有两个参数
    // 参数一 --- 新值
    // 参数二 --- 旧值
    info(newV, oldV) {
      // 如果监听的值是对象，获取到的新值和旧值是对应对象的代理对象
      console.log(newV, oldV)

      // 代理对象 转 原生对象
      // 1. 使用浅拷贝获取一个新的对象，获取的新的对象为原生对象
      console.log({...newV})

      // 2. 使用Vue.toRaw方法获取原生对象
      console.log(Vue.toRaw(newV))
    }
  },
  methods: {
    change() {
      this.info = {
        name: 'Steven'
      }
    }
  }
}).mount('#app')

設定オプション

プロパティ

説明deepオンにするかどうか深い監視の場合値はブール値ですオンになっていない場合、オブジェクトが監視されている場合、オブジェクトの参照のみが発生します監視コールバックは、変更された場合にのみトリガーされますすぐに監視を開始するかどうかByデフォルトでは、最初のレンダリングでは監視モニタリングがトリガーされません。値が変更された場合にのみ、監視モニタリングがトリガーされます。immediate を true に設定した後、監視モニタリングが初めてトリガーされます。レンダリングも同様に行われます。監視監視をトリガーします。この時点では、oldValue の値は未定義です。オブジェクトのプロパティを直接監視します

開始後、オブジェクトが監視されている場合、オブジェクト内のいずれかの属性が変更される限り、監視コールバックがトリガーされます	immediate
	Vue.createApp({ data() { return { info: { name: 'Klaus' } } }, watch: { info: { // 开启了深度监听后，当info的属性发生改变的时候，就会触发对应的watch回调 // 注意: 和直接修改info引用不同的是，如果直接修改的是对象的属性 // 那么此时newV和oldV是同一个对象的引用, 此时也就获取不到对应的旧值 handler(newV, oldV) { console.log(newV, oldV) console.log(newV === oldV) // => true }, deep: true, immediate: true } }, methods: { change() { this.info.name = 'Steven' } } }).mount('#app') その他の記述方法

watch: {
  'info.name'(newV, oldV){
    console.log(newV, oldV)
  }
}

文字列の書き込み方法

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // watch的值如果是一个字符串的时候
    // 会自动以该字符串作为函数名去methods中查找对应的方法
    'info.name': 'watchHandler'
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    },
    watchHandler(newV, oldV){
      console.log(newV, oldV)
    }
  }
}).mount('#app')

配列の書き込み方法

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    'info.name': [
      'watchHandler',

      function handle() {
        console.log('handler2')
      },

      {
        handler() {
          console.log('handler3')
        }
      }
    ]
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    },
    watchHandler(){
      console.log('handler1')
    }
  }
}).mount('#app')

$watchリーリー

以上がVue3 で計算プロパティとリスナーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。