IT评测·应用市场-qidao123.com技术社区

标题: Vue3 中的盘算属性和监听属性 [打印本页]
作者: 伤心客    时间: 2025-1-2 21:52
标题: Vue3 中的盘算属性和监听属性
1. 盘算属性computed

   作用：根据已有数据盘算出新数据（和Vue2中的computed作用一致）
  1. <template>
  2.     <div class="person">
  3.         <input type="text" v-model="person.firstName"/>
  4.         <br>
  5.         <input type="text" v-model="person.lastName"/>
  6.         <br>
  7.         <span>全名：{{ person.fullName }}</span>
  8.         <input type="text" v-model="person.fullName"/>
  9.     </div>
  10. </template>
  11.    
  12. <script>
  13. import { reactive,computed } from 'vue'
  14.     export default {
  15.         name: 'Computed',
  16.         setup() {
  17.             let person = reactive({
  18.                 firstName: '李',
  19.                 lastName: '四',
  20.             })
  22.              //简写形式（只能读）
  23.              person.fullName = computed(() => {
  24.                  return person.firstName + '-' + person.lastName
  25.              })
  28.             //完整形式（可读可改）
  29.             person.fullName = computed({
  30.                 get() {
  31.                     return person.firstName + '-' + person.lastName
  32.                 },
  33.                 set(value){
  34.                     let names = value.split('-')
  35.                     person.firstName = names[0]
  36.                     person.lastName = names[1]
  37.                 },
  38.             })
  40.             return {
  41.                 person,
  42.             }
  43.             
  44.         }
  45.     }
  46. </script>
复制代码
2. 监听属性 watch

  1. <template>
  2.     <div>{{ sum }}</div>
  3.     <button @click="sum++">点我+1</button>
  4.     <hr>
  5.     <div>{{ msg }}</div>
  6.     <button @click="msg += '!'">点我修改信息</button>
  8.     <hr>
  9.     <h3>姓名：{{ person.name }}</h3>
  10.     <h3>年龄：{{ person.age }}</h3>
  11.     <h3>薪资：{{ person.job.j1.salary }}K</h3>
  12.     <button @click="person.name += '!'">点我修改姓名</button>
  13.     <button @click="person.age++">点我修改年龄</button>
  14.     <button @click="person.job.j1.salary += 10">点我修改薪资</button>
  15. </template>
  16.    
  17. <script>
  18. import { reactive, ref, watch, watchEffect } from 'vue'
  19.     export default {
  20.         name: 'Watch',
  21.         setup() {
  22.            let sum = ref(0)
  23.            let msg = ref('hello')
  24.            let person = reactive({
  25.                name: '张三',
  26.                age: 18,
  27.                job: {
  28.                    j1: {
  29.                        salary: 20
  30.                    }
  31.                }
  32.            })
  34.            // .....下文在这边补充
  37.             return {
  38.                 sum,
  39.                 msg,
  40.                 person
  41.             }
  42.         }
  43.     }
  44. </script>
复制代码
【环境一】监听ref定义的一个响应式数据
监听sum的值的变化 
  1.            watch(sum, (newVal, oldVal) =>{
  2.                 console.log('sum的值发生了变化', newVal, oldVal);
  3.            }, {immediate: true})  // {immediate: true, deep: true}
复制代码
【环境二】 监听ref定义的多个响应式数据
监听sum, msg的值的变化
  1.            watch([sum, msg], (newVal, oldVal) => { // 包装成数组的形式
  2.                 console.log('sum或msg的值发生了变化', newVal, oldVal);
  3.            },{immediate: true})
复制代码
【环境三】监听reactive定义的一个响应式数据的全下属性
注意：此处无法正确的获取oldValue
  1.              watch(person, (newVal, oldVal) =>{
  2.                 console.log('person的值发生了变化', newVal, oldVal)
  3.             }) // {deep: false} 加上这个，就监测不到薪资改变了
复制代码
【环境四】监听reactive定义的一个响应式数据中的某个属性
  1.             watch(() => person.name, (newVal, oldVal) =>{
  2.                 console.log('person的name属性发生了变化', newVal, oldVal)
  3.             })
复制代码
【环境五】监听reactive定义的一个响应式数据中的某些属性
  1.             watch([() => person.name, () => person.age], (newVal, oldVal) =>{
  2.                 console.log('person的name或age属性发生了变化', newVal, oldVal)
  3.             })
复制代码
【环境六】特殊环境 
  1.              watch(() => person.job, (newVal, oldVal) =>{
  2.                 console.log('person的job属性发生了变化', newVal, oldVal)
  3.              }, {deep: true})
复制代码

3. watchEffect

    用谁就监视谁
  1.             watchEffect(() =>{ // 用谁就监视谁
  3.                 const x1 = sum.value
  5.                 const x2 = person.job.j1.salary
  7.                 console.log('watchEffect所指定的回调函数执行了')
  9.             })
复制代码
 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4