vue3-ref

声明储存ref

  
    零三
    change ref text
  



  import {ref} from 'vue'
  export default {
    name: 'App',
    setup(){
      const refTest = ref(null)
      const changeRefText = ()=>{
        refTest.value.innerText = "零零三"
      }
      return {
        refTest,
        changeRefText
      }
    }
  }

在上面这种情况，先在setup创建ref，再赋值给html的ref，操作refTest即可

通过ref调用子方法

父组件

  
    调用子组件方法
    获取子组件变量
    
  



  import {ref} from 'vue'
  import Son from "./components/Son";
  export default {
    name: 'App',
    components: {
      Son
    },
    setup(){
      const sonRef = ref(null)
      const onSonFn = ()=>{
        sonRef.value.consoleFn('零三')
      }
      const getSonData = () => {
        console.log(sonRef.value.num)
      }
      return {
        sonRef,
        onSonFn,
        getSonData
      }
    }
  }

子组件

    
        
        子组件 num = {{num}}
    



    import {ref} from 'vue'
    export default {
        name: "Son",
        setup(){
            const num = ref(123);
            const consoleFn = (params)=>{
                console.log("触发了子方法呀!参数="+params)
            }
            return {
                consoleFn,
                num
            }
        }
    }

在 v-for 中使用

  
    
      {{ item }}
    
  



  import { ref, reactive, onBeforeUpdate,onMounted } from 'vue'

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

      // 确保在每次变更之前重置引用
      onBeforeUpdate(() => {
        divs.value = []
      })
      onMounted(()=>{
        console.log(divs)
      })

      return {
        list,
        divs
      }
    }
  }

模板 ref 在 v-for 中使用 vue 没有做特殊处理，需要使用函数型的 ref（3.0 提供的新功能）来自定义处理方式