vue3计算属性与监视

一、computed函数

---

• 与Vue2.x中computed配置功能一致

• 写法

  import {computed} from 'vue'
  
  setup(){
      ...
  	//计算属性——简写
      let fullName = computed(()=>{
          return person.firstName + '-' + person.lastName
      })
      //计算属性——完整
      let fullName = computed({
          get(){
              return person.firstName + '-' + person.lastName
          },
          set(value){
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
          }
      })
  }
  

二、computed名字案例

---

• 父组件：App组件

<template>
	<Demo/>
</template>

<script>
	import Demo from './components/Demo.vue'
	export default {
		name: 'App',
		components:{Demo},
	}
</script>

• 子组件：Demo组件

<template>
	<div>
		<h1>一个人的信息</h1>
		姓：<input type="text" v-model="person.firstName"><br>
		名：<input type="text" v-model="person.lastName"><br>
		<span>全名：{{ person.fullName }}</span><br>
		全名：<input type="text" v-model="person.fullName">
	</div>
</template>

<script>
import { reactive, computed } from 'vue'
export default {
	name: 'Demo',
	setup() {
		//数据
		let person = reactive({
			firstName: '张',
			lastName: '三'
		})
		//计算属性——简写（没有考虑计算属性被修改的情况）
		/* person.fullName = computed(()=>{
			return person.firstName + '-' + person.lastName
		}) */

		//计算属性——完整写法（考虑读和写）
		person.fullName = computed({
			get() {
				return person.firstName + '-' + person.lastName
			},
			set(value) {
				const nameArr = value.split('-')
				person.firstName = nameArr[0]
				person.lastName = nameArr[1]
			}
		})

		//返回一个对象（常用）
		return {
			person
		}
	}
}
</script>

三、Vue2中的watch

---

<template>
  <div>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="sum++">点我+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 0
    }
  },
  watch: {
    // 简单写法
    /* sum(newVal, oldVal) {
      console.log('sum的值变化了:', newVal, oldVal);
    } */

    sum: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        console.log('sum的值变化了:', newVal, oldVal);
      }
    }
  }
}
</script>

三、watch函数

---

• 与Vue2.x中watch配置功能一致

• 两个小“坑”：

  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效。

			let sum = ref(0)
			let msg = ref('你好啊')
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

• 情况一：监视ref定义的响应式数据🤣

  watch(sum,(newValue,oldValue)=>{
  	console.log('sum变化了',newValue,oldValue)
  },{immediate:true})

• 情况二：监视多个ref定义的响应式数据🤣

  watch([sum,msg],(newValue,oldValue)=>{
  	console.log('sum或msg变化了',newValue,oldValue)
  }) 

• 情况三：监视reactive定义的响应式数据🤣

• 若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
• 若watch监视的是reactive定义的响应式数据，则强制开启了深度监视

  watch(person,(newValue,oldValue)=>{
  	console.log('person变化了',newValue,oldValue)
  },{immediate:true,deep:false}) //此处的deep配置不再奏效

• 情况四：监视reactive定义的响应式数据中的某个属性🤣

watch(()=>person.job,(newValue,oldValue)=>{
  	console.log('person的job变化了',newValue,oldValue)
  },{immediate:true,deep:true}) 

• 情况五：监视reactive定义的响应式数据中的某些属性🤣

  watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
  	console.log('person的job变化了',newValue,oldValue)
  },{immediate:true,deep:true})

• 特殊情况😅

  watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job变化了',newValue,oldValue)
  },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

watch时value的的问题

	setup() {
		//数据
		let sum = ref(0)
		let msg = ref('你好啊')
		let person = ref({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		})
		
		watch(sum, (newValue, oldValue) => {
			console.log('sum的值变化了', newValue, oldValue)
		})

		watch(person, (newValue, oldValue) => {
			console.log('person的值变化了', newValue, oldValue)
		}, { deep: true })

五、watchEffect函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

  //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
  watchEffect(()=>{
      const x1 = sum.value
      const x2 = person.age
      console.log('watchEffect配置的回调执行了')
  })