开发中vue3 使用心得_vue3 await-CSDN博客

本文链接：https://blog.csdn.net/song854601134/article/details/131205155

父组件传递ref给子组件，子组件接手后变味了reactive

我们把一个ref在template里传递为子组件的话，引擎会自动.value,相当于给ref去了“包装”,这样会造成我们父组件里声明的ref对象到了子组件里变为了reacive对象。

setup 中使用await

我们可以在<script setup> 中直接使用 await来等待异步函数，编译器会自动给 setup函数带上 async 。但是一旦使用了await ，父组件中需要使用 <suspense><suspense/>把子组件包裹起来

<script setup>
let { data } = await examInspectGroupQuery();
</script>

这样可以确保模板上渲染是接口返回的数据，或者传递给子组件的是接口返回的数据

reactive重新赋值，视图未更新

就是dom编译的时候，对使用{} 或者 v-if、v-for等对一个 let obj = reactive的对象进行跟踪，在onMounted的时候，我们对这个reactive对象重新赋值(obj = obj2)，导致我们虽然改变了obj 的值，但是视图没有更新，没有显示最新值，因为，我们在dom编译时候，变化跟踪的是之前那个reactive对象，之前那个reactive对象未改变，所以视图未更新。

watch写在onMounted既可以保证一定能监视到数据的变化，又可以保证变化回调在dom挂载之后执行。

  onMounted(async () => {
    watch(tableData, (newV) => {
    tableData.value.forEach((it, index) => initCardChart('cardChart' + index));
  	});
  });

router里route的name如果相同的话，下面那个会冲掉上面那个从而使上面那个route根据path

vue2中casader的点击事件在vue3中变为了togglePopperVisible事件。

父组件里的响应式对象ref传给子组件，子组件的watch监听不到

<Children :areaData="areaData/>	
watch(
   prop.areaData,
  async (data) => {
    formObj.farId = data.farId;
    await searchData();
  },
  {
    deep: true
  }
);

子组件接收父组件传来的ref类型的prop，子组件收到的是一个reactive类型的对象

我们把一个ref在template里传递为子组件的话，引擎会自动.value,相当于给ref去了“包装”,这样会造成我们父组件里声明的ref对象到了子组件里变为了reacive对象。
解决方式：可以给外层的prop里的ref里在加一层

vue如何触发template中Array类型的数据的更新，

我们要想触发template中Array类型的数据的更新，一定要对代理过的对象操作，因为只要代理过的对象，我们修改这个对象的属性才能触发该对象的“依赖”所监听的，
在这里插入图片描述
如这里的getNeoData 函数使用了一个obj对象，但是这个对象不是经过“代理”的对象（虽然是push过的对象）

一个是代理过的对象，这个对象发生变化时候可以触发tempalte的dataArr数据监听从而重新渲染页面

await 会等到async的return， async函数默认不会返回值，返回为undefined。

ref自动解构

默认ref会在template的语法中自动解构，所以在template不用写.value

const dataArr = ref([
  ref({
    formObject: {},
    serviceList: [],
    commodity: []
  })
]);
const peple= ref({
  address: ref({
    name: 123
  })
});
console.log(peple.address.name)  123

同时在 script中ref对象中嵌套ref对象，使用时候也会自动解构，但是ref中数组中的ref不会自动解构

父组件中传递prop 一个组件给子组件

父组件中传递prop 一个组件给子组件，子组件最好把接收到的子组件放在component的is属性里来渲染。

nextTick 直接放在setup里el-table的引用。

为啥要nextTick 必须放个函数里才能拿到table的引用，放在setup里好像不行。

在这里插入图片描述

vite 中 changeOrigin无效

vite中改变changeOrigin 在f12请求中看host 还是本地的host，不是服务器地址

f12中查看未生效是正常的，因为vite node服务中代理了一次浏览器的请求，所以冲浏览器的角度来看host还是它发出请求的host，vite node代理服务器看host才是改的值

computed 计算属性无法赋值

computed 计算属性默认是不能执行set方法的，vue3创建computed时候可以传一个含有set和 get方法的对象就，这个可以执行set方法

inheritAttrs：false(传递attribute到根节点嵌套的子组件里)

“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id

父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被“透传”。这意味着当我们有一个单根节点的子组件时，这些绑定会被作为一个常规的 HTML attribute 应用在子组件的根节点元素上。当你编写的组件想要在一个目标元素或其他组件外面包一层时，可能并不期望这样的行为。我们可以通过设置 inheritAttrs 为 false 来禁用这个默认行为。这些 attributes 可以通过 $attrs 这个实例属性来访问，并且可以通过 v-bind 来显式绑定在一个非根节点的元素上。

注意当只有一个根节点时候，才会发生”透传“,所以一个组件里有两个根节点时候，不用声明inheritAttrs：false，也不会发生透传；但当组件只有一个根节点，根节点里面又嵌套有其他组件，我们想把attribute传到这个其他组件里，由于attribute默认继承（也就是传到了根节点上了），所以需要声明inheritAttrs：false；