Vue3学习

 vue3中的生命周期：

setup 开始创建组件前

onBeforeMount 组件挂载到页面之前执行

onMounted 组件挂载到页面之后执行

onBeforeUpdate 组件更新之前

onUpdated 组件更新之后

onBeforeUnmount(): 组件卸载之前执行的函数；

onUnmounted(): 组件卸载完成后执行的函数；

<template>
  <button @click="increment">
    {{ state }}
  </button>

  <button @click="increment1">
    {{ state1.count }}
  </button>

  姓:<input v-model="Person.X"><br>
  名:<input v-model="Person.M"><br>
  双向响应:<input v-model="Person.AXM">

 <h2>年龄：{{Person.age}}</h2>
 <button @click="Person.age++">+1</button>
</template>

<script setup>
//钩子函数steup
//reactive、ref函数
//计算属性 computed

import { reactive ,ref ,computed ,watch ,watchEffect } from 'vue'

const state = ref(0)
const state1 = reactive({ count: 0 })

function increment() {
  state.value++
}
function increment1() {
  state1.count++
}

const Person=reactive({X:'张',M:'三'})
Person.AXM=computed({
  get(){
    return Person.X+'-'+Person.M
  },
  set(value){
    const arr=value.split('-')
    Person.X=arr[0]
    Person.M=arr[1]
  }
})

//computed(回调函数)
const mytext = ref('')
const computedSum = computed(() => mytext.value.substring(0, 1).toUpperCase() + 
  mytext.value.substring(1))
  // 注意mytext.value

</script>

监听watch和watchEffect

（1） watch ：

• 第一次页面展示的时候不会执行，数据变化的时候才会执行，只有设置了初始化监听才会监听（immediate: true）
• 参数可以拿到当前值和原始值
• 可以侦听多个数据的变化，用一个侦听器承载

（2）watchEffect ：

• 页面的首次加载就会执行。
• 自动检测内部代码，代码中有依赖 便会执行
• 不需要传递要侦听的内容，会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数
• 不能获取之前数据的值 只能获取当前值
• 一些异步的操作放在这里会更加合适

（3）watch函数有两个小坑

• 监视reactive定义的响应式数据（该数据为一个对象，因为reactive只能定义数组或对象类型的响应式）时：oldValue无法正确获取，会强制开启深度监视，deep配置不生效。
• 监视reactive定义的响应式数据中的某个属性时，且该属性是一个对象，那么此时deep配置生效。

import {ref,reactive,watch,watchEffect} from 'vue'
export default {
   name:'demo',
   setup(){
       //数据
       let sum = ref(0)
       let msg = ref('hello')
       let person = reactive({
           name:'zhangsan',
           age:'18',
           job:{
               j1:{
                   salary:20
               }
           }
       })
       //监视(三个参数，第一个是监视的对象，第二个是监视的回调函数，第三个是监视的配置)

       //情况一：监视ref所定义的一个响应式数据
       watch(sum,(newValue,oldValue)=>{
           console.log('sum的值变化了',newValue,oldValue)
       },{immediate:true,deep:true})
       //immediate的值为true时表示非惰性的立即执行的(默认情况下是false)
       //deep深层次触发（此处设置deep无意义）

       //情况二：监视ref所定义的多个响应式数据，写成数组的形式
       watch([sum,msg],(newValue,oldValue)=>{
           console.log('sum或者msg变了',newValue,oldValue)
       })

       //情况三：监视reactive所定义的响应式数据
       //若监视的是reactive定义的响应式数据，则无法获得oldValue，会强制开启深度监视

        //我们发现改变person的任意一个属性都会被监视到
        watch(person,(newValue,oldValue)=>{
            console.log('person改变了',newValue,oldValue)
        }) 
        
        //我们尝试设置deep:false,关闭深度监听（目的：改变job的值不会被watch监听到）
        //发现deep:false并没有生效，原因是此时watch监视的是reactive定义的响应式对象
        //默认强制开启了深度监听
        watch(person,(newValue,oldValue)=>{
            console.log('person改变了',newValue,oldValue)
        },{deep:false}) 
        


      //情况四：监视reactive所定义的响应式数据中的某个属性
       watch(()=>person.name,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        })
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        })
        //从上边我们发现改变name会触发监听，但是改变job不会
        //这是因为name属性的值只是一个简单的基本类型数据，
        //而job属性的值是一个对象，比较深，想要监视到，就要开启深度监视,程序如下：
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job改变了',newValue,oldValue)
        },{deep:true})//此时job改变，会被监视到，此处的deep配置生效
        //需要和情况三进行区分，此处watch监视的是reactive所定义的对象中的某个属性
        //而情况三watch监视的是reactive所定义的对象

        //情况五：监视reactive所定义的响应式数据中的某些属性,写成数组的形式
        watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
            console.log('person的name或age改变了',newValue,oldValue)
        })


        //watchEffect函数内部所指定的回调中用到的数据只要发生变化，就会重新执行回调
        //只有一个参数，就是回调
        watchEffect(()=>{
            const x1 = sum.value//因为sum是ref定义的响应式数据，需要使用.value调用
            const x2 = person.age
            console.log('watchEffect配置的回调执行了')
        })

       //返回一个对象（常用）
       return{
           sum,
           msg,
           person
       }
   }
}

ref嵌套在reactive中

<template>
  <div class="home">
    home-{{count}}--{{state.count}}
    <button @click="add">click</button>
  </div>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
  name: 'Home',
  setup () {
    const count = ref(0)
    const state = reactive({
      count
    })
    const add = () => {
      state.count++
      //state.count 跟ref count 都会更新
    }

    return {
      state,
      add,
      count
    }
  }
}
</script>

 ref访问dom或者组件

<input type="text" ref="myinput"/>
//js
const myinput = ref(null)
console.log(myinput.value.value)