[JavaScript知识库]vue3.0-第二章之生命周期（一）

1.computed计算属性
1）必须要引入computed

import {reactive,computed} from 'vue'

使用：computed放在setup里面作为方法使用

setup(){
    let p = reactive({
      firstName:"张",
      lastName:"三",
    })
    
    let fullName = computed(()=>{//计算属性（需要引入）
      return p.firstName +'-'+p.lastName
    })
    return {person,fullName};
  }

也可以 computed直接挂载在p变量上

p.fullName = computed(()=>{//这样的不需要再return这个fullName变量
  return p.firstName +'-'+p.lastName
})

2）.如何将计算属性变成双向绑定的

let fullName = computed({
      get(){//获取
        return p.firstName +'-'+p.lastName
      },
      set(val){//设置
        let arr = val.split("-");
        p.fullName = arr[0];
        p.lastName = arr[1]
      },
    })

2.watch
1).监听一个ref的数据，参数：第一个参数是监听的值，第二个是个函数

<template>
  <div>
      <div>{{sum}}</div>
      <button @click="sum++">点我+1</button>
  </div>
</template>
<script>
import {ref,watch} from 'vue'
export default {
  name: 'app1',
  setup(){
      let sum = ref(0);
      watch(sum,(newVal,oldVal)=>{//第一个参数是监听的值，第二个是个函数
          console.log("sum变了",newVal,oldVal)
      })

      return {
          sum
      }
  }
}
</script>

2.）监听多个ref,第一个参数是个数组，返回的数据newVal,oldVal都是数组

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

      <div>当前的信息为：{{msg}}</div>
      <button @click="msg+='!'">修改信息</button>
  </div>
</template>

<script>
import {ref,watch} from 'vue'
export default {
  name: 'app1',
  setup(){
      let sum = ref(0);
      let msg = ref(0);
    //   监听多个ref
        watch([sum,msg],(newVal,oldVal)=>{
          console.log("sum或msg变了",newVal,oldVal)
      })
      return {
          sum,msg
      }
  }
}
</script>

控制台打印如图：
分别点击第一个按钮和第二个按钮：

3).可配置第三个参数：,{immediate:true}

//监听一个ref
watch(sum,(newVal,oldVal)=>{
    console.log("sum变了",newVal,oldVal)
},{immediate:true})

//   监听多个ref
watch([sum,msg],(newVal,oldVal)=>{
    console.log("sum或msg变了",newVal,oldVal)
},{immediate:true})

4).监听reactive变化,**
1.监听整个reactive
此处有坑：

1.此处无法正确的获得oldVal，返回出来的oldVal就是newVal
2.强制开启了深度监视（deep:true无效），意思就是vue3的监听默认就是深度监听的，不需要加deep:true，但是加了deep:false的时候不能取消深度监听

let person = reactive({
     name:"张三",
     age:18,
     job:{
		j1:{
			salary:20
		}	
	}
 })
 //  监听reactive
 watch(person,(newVal,oldVal)=>{
     console.log("person变了",newVal,oldVal)
 },{immediate:true})

2.监听reactive中某一个属性的变化
注视：第一个参数需要改成函数类型

watch(()=>person.age,(newVal,oldVal)=>{
     console.log("person变了",newVal,oldVal)
 },{immediate:true})

3.监听reactive内部层级内的某个属性的变化，

这个地方需要考虑deep:true，是有效的

let person = reactive({
      name:"张三",
      age:18,
      job:{
          j1:{
              salary:20
          }	
      }
})
watch(()=>person.job,(newVal,oldVal)=>{
     console.log("person变了",newVal,oldVal)
 },{deep:true})///此处deep又是生效的，因为监听的是内部的某个层级属性

3.watchEffect

watchEffect： 只有一个参数为回调函数，监听该函数内部用到的属性，用到的属性改变了才会去触发，默认开启immediate:true(初始化就调用)，
类似于computed，但是computed需要有返回值，watchEffect不需要

watchEffect(()=>{//只要函数内用到的属性变化，就会触发监听
    const a = sum.value;
    const b = person.job.j1.salary;
    console.log('watchEffect执行了')
})