vue3计算属性与监视，watch与watchEffect

<template>
  <div class="about">
    <h2>计算属性与监事</h2>
    <fieldset>
      <legend>姓名操作</legend>
      姓氏:<input type="text" v-model="user.fisstName" placeholder="请输入姓氏" /><br>
      名字:<input type="text" v-model="user.lastName" placeholder="请输入名字" />
    </fieldset>
    <fieldset>
      <legend>计算属性和监视的演示</legend>
      姓名:<input type="text" v-model="fullname1" placeholder="显示姓名" /><br>
      姓名:<input type="text" v-model="fullname2" placeholder="显示姓名" /><br>
      姓名:<input type="text" v-model="fullname3" placeholder="显示姓名" />
    </fieldset>
  </div>
</template>
<script>
import { computed, reactive, ref, watch, watchEffect } from 'vue';
export default {
  name: 'About',
  components: {
   
  },
  setup () {
    const user=reactive({
      fisstName:"东方",
      lastName:"不败"
    })
    //通过计算属性的方式，实现第一姓名
    //vue3中的计算属性
    //计算属性函数中如果只传入一个回调函数，表示是get
    //返回的事ref
    const fullname1=computed(()=>{
        return user.fisstName+'-'+user.lastName
    })
    //第二个姓名
    const fullname2=computed({
      get(){
        return user.fisstName+'-'+user.lastName
      },
      set(val){
          console.log("=========",val)
          const names=val.split('-');
          user.fisstName=names[0];
          user.lastName=names[1];
      }
    })

    //监视
    //immediate:true 当前watch自动会执行一次
    //deep:true 深度监视
    const fullname3=ref('');
    watch(user,({fisstName,lastName})=>{
       fullname3.value=fisstName+'-'+lastName
    },{immediate:true,deep:true})

    // watch(()=>{
    //    fullname3.value=user.fisstName+'-'+user.lastName
    // },{immediate:true,deep:true})

    // watchEffect(()=>{
    //     fullname3.value=user.fisstName+'-'+user.lastName
    // })

    // 立即执行，没有惰性 immediate
    // 不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
    // 不能获取之前数据的值
   watchEffect(()=>{
         const name=fullname3.value.split('-');
         user.fisstName=name[0];
         user.lastName=name[1];
    })

    //watch监视多个数据的
    //当我们使用watch监听非响应式的数据的时候，代码需要修改
    // watch([user.fisstName,user.lastName],()=>{
    //   console.log("=====")
    // })
    
    //用watch监视非响应式的数据的时候，需要回调的方式
    watch([()=>user.fisstName,()=>user.lastName],([curn,cure],[prn,pred])=>{
      console.log('watch', curn, prn, '---', cure, pred);
    })

    // watch([() => user.fisstName, () => user.lastName], ([curName, curEng], [prevName, preEng]) => {
    //     console.log('watch', curName, prevName, '---', curEng, preEng);
    //   },{ immediate: true })


    return {
      user,
      fullname1,
      fullname2,
      fullname3
    }
  },
  data(){
    return {
      username:"111111",
      list:[1,3,4,5,]
    }
  },
  methods:{
    gex(){
      console.log(this)
      this.list.push(10)
    }
  }
}
</script>

 

watch与watchEffect的区别以及使用

https://blog.csdn.net/qq_17355709/article/details/112723178

https://www.jb51.net/article/204827.htm