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企服之家，中国第一个企服评测及商务社交产业平台。