【4.0】vue3中的属性

【4.0】vue3中的属性

【一】计算属性computed

• export default中的computed属性

【1】单向计算属性computed

• 案例：输入姓和名，拼接得到姓名（但是姓名反过来显示性和名就报错）

• person.fullname=computed(function(){return person.fistname+person.lastname
  })
  #由于person.fistname+person.lastname会变，所以函数会自己变
  

  <template><div class="about"><h3>姓和名组合</h3><h4>请输入您的姓:<input type="text" v-model="person.fistname"> </h4><h4>请输入您的名:<input type="text" v-model="person.lastname"> </h4><h4>您的全名:<input type="text" v-model="person.fullname"> </h4></div>
  </template><script>
  import {ref, reactive, computed} from "vue";export default {name:'AboutView',setup(){//定义姓名函数const person=reactive({fistname:'',lastname:''})//定义pserson的fullname属性person.fullname=computed(function(){return person.fistname+person.lastname})return {person}},
  }
  </script>
  

【2】双向计算属性set和get

• 类似变量1=变量2+变量3，当变量2和3变化时候1肯定变，现在1变带着2和3变

• get是后面变前面在变，set是后面变（根据值分解参数）

• person.fullName = computed({get() { return person.firstName + person.lastName},set(value) {person.firstName = value.slice(0, 1)person.lastName = value.slice(1)}
  

  <template><div class="about"><h3>姓和名组合</h3><h4>请输入您的姓:<input type="text" v-model="person.fistname"> </h4><h4>请输入您的名:<input type="text" v-model="person.lastname"> </h4><h4>您的全名:<input type="text" v-model="person.fullname"> </h4></div>
  </template><script>
  import {ref, reactive, computed} from "vue";export default {name:'AboutView',setup(){//定义姓名函数const person=reactive({fistname:'',lastname:''})// const fullname=ref('')person.fullname=computed({ get(){return person.fistname+person.lastname},set(value){person.fistname=value.slice(0,1)person.lastname=value.slice(1)return person.fistname,person.lastname}})return {person}},}
  </script>
  

【二】监听属性watch

【1】总结watch（value,(newValue, oldValue)）

• export default中的watch方法，放入watch中的值或者变量可以被监听，只要变化就会触发该函数，并且有俩参数（修改前，修改后）

• watch(height, (newValue, oldValue) => {console.log('height变化了', newValue, oldValue)
  })
  

• watch([变量1, 变量2], (newValue, oldValue) => {console.log('1或2变化了', newValue, oldValue)
  })
  

【2】监听值类型

• <template><div class="about"><h3>监听值类型{{height}}</h3><button @click="heightadd">点我增加身高</button></div>
  </template><script>
  import {ref, reactive, computed, watch} from "vue";export default {name:'AboutView',setup(){//监听值类型const height=ref(180)//监听函数watch(height,(newvalue,oldvalue)=>{console.log(newvalue)console.log(oldvalue)})//变化函数  function heightadd(){height.value++}return {count,add,user_info,changename,person,height,heightadd}},}
  </script>
  

【2】监听对象类型

• <h3>监听对象类型{{user}}</h3>
  <button @click="changeuser">点我换人</button>
  

  //监听对象类型
  const user=reactive({username:'zhou',age:18})watch(user,(newvalue,oldvalue)=>{console.log(newvalue)console.log(oldvalue)
  })
  function changeuser(){user.username='zhou6'user.age++
  }
  

【3】多个变量一起监听

• const sum = ref(100)
  const msg = ref('很好')
  function changeValue(){sum.value++msg.value='不太好'
  }watch([sum, msg], (newValue, oldValue) => {console.log('sum或msg变化了', newValue, oldValue)
  })
  

【4】watchEffect函数

• 不需要指定监听谁，只要变量在watchEffect内部使用了，当这个变量发生变化了，就会触发

• wacth更适用于需要有条件监听数据变化的场景，computed更适合用于创建派生数据和性能优化，wactheffect会追踪函数内部的所有值，消耗比较大

• 如果多个都同时变化，只会执行一次

  watchEffect(() => {const x1 = sum.valueconst x2 = person.nameconsole.log('watchEffect配置的回调执行了')
  })