vuejs3 未安装时表现良好，手表时表现不佳

Question

我对 VueJS3 越来越着迷了。

我创建了一个这样的服务，它从 API

获取数据


import axios from "axios";
import {  reactive} from "vue";

export default function () {


    let products = reactive([]);
    async function searchProduct(param) {
        console.log(`dans la fonction avec param ${param}`)
        const url = "http://localhost:5000/product/?search="+param;
        const result = await axios.get(url);
        products=products.splice(0,0,...result.data)
        console.log(products)
        return products
    }
    
    return { products, searchProduct };
}

到目前为止一切顺利。当页面加载时（使用 hook onMounted 调用，一切正常）现在我有一个链接到 ref searchQuery 的输入 html 元素。当我更改输入元素中的值时，我可以从 api 的日志中看到 hook watch 正在调用，但我的反应值“products”永远不会更新。

<script>
import {  ref,watch,onMounted } from "vue";
import serviceFactory from "./dataservice";

export default {
    setup() {
      let searchQuery = ref("");

      // Create them by calling the exported function
      let {  products,searchProduct } = serviceFactory();
        
      // This works when page load 
      onMounted(async () => await searchProduct(searchQuery.value ));

      // This DOESN't works when the ref searchQuery is updated (through input HTML) : I see the api call but products is not updated :(
      watch(searchQuery, (searchQuery) => {
          await searchProduct(searchQuery )
        })

      return {
        searchProduct,       // from factory function
        products,       // from factory function,
        searchQuery
      };
    },
};
</script>

我不明白我失败的原因，有什么建议吗？

Answer 1

您正在覆盖响应中的产品数组，从而失去反应性。我建议在大多数情况下使用 const 而不是 let 的原因之一。

您可以为您的产品使用反应对象或仅使用 ref 并将结果分配给它的 value:

import axios from "axios";
import { ref } from "vue";

export default function () {

    const products = ref([]);
    async function searchProduct(param) {
        console.log(`dans la fonction avec param ${param}`)
        const url = "http://localhost:5000/product/?search="+param;
        const result = await axios.get(url);
        products.value = products.value.splice(0,0,...result.data)
        console.log(products.value)
        return products.value
    }
    
    return { products, searchProduct };
}

vuejs3 未安装时表现良好，手表时表现不佳

vuejs3 good behavior with unMounted, bad with watch

vuejs3