使用vue3遇见的坑

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

使用vue3遇见的一些问题

现在使用vue3已经开始做做了一个项目了。
我发现有一些问题想将它记录下来
让更多的小伙伴知道这其中的坑
第一个是自定义事件不要使用click。
这样会造成触发两次。第一次是自定义事件，第二次是原生事件
还有一个是使用ref的时候数据没有跟新。
这个并不是vue3的ref的问题，而是我们使用的方式不正确

自定义click事件被触发两次的原因

我定义了一个组件，点击的时候向上抛出了click事件
但是该事件被触发了两次。很奇怪。
请看下面的小例子

组件向上抛出click事件

<template>
    <div>
        <div class="btnclik" @click="$emit('click','点击了')">点击我</div>
    </div>
</template>
我向上抛出去了一个事件click,
大家注意使用这个组件的时候执行的次数

父页面出现的现象

<template>
  <div class="box">
    <test-com @click="handerHander"></test-com>
  </div>
</template>
<script>
import testcom from "../components/test-com.vue"
  export default {
    components:{
      'test-com':testcom,
    },
    setup(){
      const handerHander=(mess)=>{
        console.log('父组件接收的值',mess);
      }
      return {
        handerHander
      }
    }
  }
</script>

解决办法

在子组件中写上  emits:['click']
<template>
    <div>
        <div class="btnclik" @click="$emit('click','点击了')">点击我</div>
    </div>
</template>
<script>
export default {
    // 这样就不会触发原生事件，只会触发自定义事件
    emits:['click']
}
</script>
其实还有一种解决办法
还有一种解决办法不要和原生事件click重名就ok了
其实这一种方法更好一些

ref数据不响应

我使用ref里面放了一个数组
然后点击按钮的时候，跟新数组。发生视图压根就没有跟新

<template>
  <div class="box">
     <li v-for="(item,index) in listData" :key="index">
       {{ item.name }}==> {{  item.age}}
     </li>
     <a-button @click="changeValue">改变值</a-button>
  </div>
</template>

<script>
import {ref} from "vue"
  export default {
    setup(){
      let listData=ref([
        {name:'张三',age:23},
        {name:'李四',age:24},
        {name:'王五',age:25}
      ])
      const changeValue=()=>{
        listData.value=[
          {name:'王多余',age:'33'},
        ]
      }
      return {
        changeValue,
        listData
      }
    }
  }
</script>