Comment utiliser les propriétés calculées et les écouteurs dans Vue3

Attributs calculés

Nous savons que certaines données des données peuvent être affichées directement via la syntaxe d'interpolation dans le modèle, mais dans certains cas, nous devrons peut-être effectuer certaines transformations sur les données avant de les afficher, ou devoir combiner plusieurs données. Affichage

L'utilisation d'expressions dans des modèles peut être très pratique, mais elles sont conçues à l'origine pour des opérations simples. Mettre trop de logique dans le modèle rendra le modèle trop lourd et difficile à maintenir, et s'il y en a plusieurs. S'il est utilisé partout, il y en a. il y aura beaucoup de code en double

Nous espérons donc séparer la logique métier et l'interface utilisateur. Une solution consiste à extraire la logique dans une méthode, mais cette approche présente les inconvénients suivants

• Toute utilisation des données deviendra une méthode. appel de méthode

• Pour obtenir des données plusieurs fois, vous devez appeler la méthode plusieurs fois pour exécuter la logique correspondante, sans mise en cache

En fait, est pour tout type de réponse Pour une logique complexe de données, vous devrait utiliser les attributs calculés对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

<div id="app">
  <!-- 计算属性的使用和普通状态的使用方式是一致的 -->
  <h3>{{ 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;)

缓存

计算属性会基于它们的依赖关系进行缓存，在数据不发生变化时，计算属性是不需要重新计算的

但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算

并且界面会使用最新的计算属性的值进行重新渲染

getter 和 setter

计算属性在大多数情况下，只需要一个getter方法即可，所以我们会将计算属性直接写成一个函数

<div id="app">
  <!-- 计算属性的使用和普通状态的使用方式是一致的 -->
  <h3>{{ 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>

侦听器

在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中，当数据变化时，template会自动进行更新来显示最新的数据

但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了

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	是否开启深度监听 值为boolean 未开启的时候，如果监听的是对象，那么只有对象的引用发生改变的时候，才会触发watch回调 开始后，如果监听的是对象，那么只要对象中的任意一个属性发生了改变，就会触发watch回调
immediate	是否立即开始监听 默认情况下，初次渲染是不会触发watch监听，只有当值发生改变后，才会触发watch监听 将immediate设置为true后，初次渲染也会触发watch监听，此时oldValue的值为undefined

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

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  created() {
    /*
          $watch 参数列表
            参数一 --- 侦听源
            参数二 --- 侦听回调
            参数三 --- 配置对象
        */
    this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), {
      immediate: true
    })
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')

Mise en cache

Les attributs calculés seront mis en cache en fonction de leurs dépendances. Lorsque les données ne changent pas, les attributs calculés n'ont pas besoin d'être actualisés🎜🎜Mais si. les données dépendantes changent, la propriété calculée sera toujours recalculée lorsqu'elle est utilisée🎜🎜Et l'interface sera restituée en utilisant la dernière valeur de propriété calculée🎜

getter et setter

🎜 Dans la plupart des cas, une propriété calculée uniquement nécessite une méthode getter, nous écrirons donc la propriété calculée directement sous forme de fonction🎜rrreee🎜L'écouteur🎜🎜 définit les données dans l'objet renvoyées par data. Ces données sont transmises via la syntaxe d'interpolation, etc. Lorsque les données changent, le modèle sera automatiquement mis à jour pour afficher les dernières données🎜🎜Mais dans certains cas, nous souhaitons surveiller les modifications de certaines données dans la logique du code. Dans ce cas, nous devons utiliser la détection. La surveillance de l'auditeur est terminée. 🎜rrreee

Options de configuration

Propriétés	Description
profond	S'il faut activer la surveillance approfondie La valeur est booléenne Quand elle n'est pas activée, si l'objet est surveillé, alors seule la référence de l'objet change, se déclenchera. le rappel de surveillance Après le démarrage, si l'objet est surveillé, tant qu'un attribut de l'objet change, le rappel de surveillance sera déclenché
immédiat td>	S'il faut démarrer la surveillance immédiatement Par défaut, la surveillance de surveillance ne sera pas déclenchée pour le premier rendu. Ce n'est que lorsque la valeur change que la surveillance de surveillance sera déclenchée Définir immédiatement sur vrai Par la suite. , le rendu initial déclenchera également la surveillance de la surveillance. À ce stade, la valeur de oldValue n'est pas définie

rrreee

Autres méthodes d'écriture

🎜Surveiller directement les propriétés de l'objet🎜rrreee🎜<code>Écriture de chaîne🎜rrreee🎜Écriture de tableau🎜rrreee🎜$watch🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!