vue3学习笔记_2

vue文件内部大题分成三部分，如下

<script>
</script>

<template>
</template>

<style>
</style>

script为脚本部分，所以的执行代码均在此部分编写

template为模板部分，即在浏览器中的展示部分，通过摆放各种组件形成最终页面

style为样式部分，也就是相当于css样式文件，调整组件的各种属性

一个概念，组合式API和选项式API，大概vue3使用组合式API，vue2使用选项式API，而网上的各种例子很少说明到底是vue2还是vue3，这两种的写法区别也挺大的。所以当你把vue2的代码复制到vue3中，往往提示各种各样的错误，令人头大。

此外script的写法也分成两种，一种是直接写

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>

另一种写法

<script setup>
  import { ref } from 'vue'
  const count = ref(0)
  const addCount = ()=> count.value++
</script>

第二种写法比较简洁，但是网上很多教程又是第一种写法，想要把第一种写法转换成第二种也挺费力的。

ps:碰见一个问题，如下代码

  const delCart = (skuId) => {
    const idx = cartList.value.find((item) => skuId === item.skuId)
    if (idx){
      cartList.value.splice(idx, 1)
    }
  }

此段代码的意思是在购物车中查找指定商品skuId，如果找到则删除。初看起来没问题，能找到，也能删除，但是仔细一看，删除的商品不对啊。查看splice的函数帮助，第一个参数是number，明显这里idx是商品对象，不可能是number，那怎么可以删除呢？js好不讲道理啊。通过比较教程，实际的代码应该是

  const delCart = (skuId) => {
    const idx = cartList.value.findIndex((item) => skuId === item.skuId)
    if (idx){
      cartList.value.splice(idx, 1)
    }
  }

原来js提供了一个findIndex函数，可以直接返回找到的商品对应的序号，这回终于是number了。

又发现了一个问题，这里idx是number，所以splice可以删除。但是，当idx为0的时候，竟然不删除了。

百思不得琪姐啊。难道js认为这里的0 就是false？尝试改变为idx>=0。ok，解决。