Cara menggunakan sifat dan pendengar yang dikira dalam Vue3

Atribut yang dikira

Kami tahu bahawa sesetengah data dalam data boleh dipaparkan secara terus melalui sintaks interpolasi dalam templat, tetapi dalam beberapa kes, kami mungkin perlu melakukan beberapa transformasi pada data sebelum memaparkannya, atau kita perlu Menggabungkan berbilang data untuk paparan

Menggunakan ungkapan dalam templat boleh menjadi sangat mudah, tetapi ia pada asalnya direka untuk operasi mudah Meletakkan terlalu banyak logik dalam templat akan menjadikan templat Terlebih berat dan sukar untuk dikekalkan, dan jika digunakan di berbilang tempat, akan terdapat banyak kod pendua

Jadi kami berharap untuk memisahkan logik perniagaan dan antara muka UI Salah satu cara ialah mengekstrak logik ke dalam kaedah, tetapi pendekatan ini mempunyai kelemahan berikut

• Semua proses penggunaan data akan menjadi panggilan kaedah

• Pemerolehan berbilang Data perlu memanggil kaedah beberapa kali untuk melaksanakan logik yang sepadan. Tiada cache

Malah, 对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

<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;)

caching

sifat yang dikira akan Cache berdasarkan kebergantungan mereka apabila data tidak tukar, atribut yang dikira tidak perlu dikira semula

Tetapi jika data bergantung berubah, atribut yang dikira akan tetap dikira semula apabila digunakan

Dan antara muka akan dipaparkan semula menggunakan yang terkini nilai harta yang dikira

pengambil dan penetap

Sifat yang dikira hanya memerlukan satu kaedah pengambil dalam kebanyakan kes, jadi kami Atribut yang dikira akan ditulis terus sebagai fungsi

<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>

Pendengar

mentakrifkan data dalam objek yang dikembalikan oleh data Data ini terikat pada templat melalui sintaks interpolasi dan kaedah lain Apabila data berubah , templat akan dikemas kini secara automatik untuk memaparkan data terkini

Tetapi dalam beberapa kes, kami ingin memantau perubahan dalam data tertentu dalam logik kod Dalam kes ini, kami perlu menggunakan jam tangan pendengar untuk melengkapkan

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')

Pilihan konfigurasi

属性	说明
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')

. Kaedah penulisan lain

直接监听对象属性

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')

Atas ialah kandungan terperinci Cara menggunakan sifat dan pendengar yang dikira dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!