vue3操作dom怎么搞

Question

我在dom上写了ref属性，然后setup里初始化了一个ref数据并return里出去，然后再nexttick里想要操作dom，明明获取到dom了，而且实际上也确实页面上的数据改了，但是有报错，应该是ts造成的，怎么解决呢？

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div v-for="(item,i) in arrs" v-bind:key="i" @click="select(i)">
     {{i}} {{item}} |
  </div>
  <span :class="{'empty:':obj?.a?.b===0,'hello':'1'==='1'}">你选择了{{ selected }}</span><br/>
  <span ref="test">原数据</span>
<!-- <hello></hello> -->
</template>

<script lang="ts">
import { defineComponent, ref,nextTick , reactive, toRefs,toRaw, onBeforeMount, onMounted, onRenderTracked, onRenderTriggered } from 'vue';
import hello from './components/HelloWorld.vue'


interface dataType {
  arrs: string[];
  selected: string;
  select: (index:number) => void
}


export default defineComponent({
  name: 'App',
  components: {
hello
  },
  setup() {
    const data:dataType = reactive({
      arrs: ref(["苹果","香蕉","橘子"]),
      selected: "",
      select : (index:number) => {
        data.selected = data.arrs[index]
      }
    })
   
    const refData = toRefs(data)
    const arrs = ref(["苹果","香蕉","橘子"])
    const selected = ref("")
    const select = (index:number) => {
      selected.value = arrs.value[index]
    }
    
    
    const test = ref(null)


    
  
    nextTick(() => {
       let raw =toRaw(data)
       console.log(raw);  

       test.value.innerHTML = '修改后的数据'
    })
      
    //跟踪所有状态
    // onRenderTracked((e) => {
    //   console.log('1',e);
      
    // })
  
    // //状态触发
    // onRenderTriggered((e) => {
    //   console.log(e);
      
    // })


    return{
      // arrs,
      // selected,
      // select
      ...refData,
      test,
      obj:{a:{b:0}}
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

因为你初始化是null，这个只是一个警告。