Vue开发中的坑跌记录

vue3 中，shallowRef 和ref 中包裹同一个对象时，其元素引用地址不相等。

如

const a = [{}, {}, {}];
const aa = ref(a);
const ab = shallowRef(a);
console.log(aa.value[0] === ab.value[0], 'false');

 Vue3 由于Proxy代理了对象，使其具有响应式。Proxy代理的对象在WebWorker通信中不可被复制

报错：Failed to execute 'postMessage' on 'Worker': [object Object] could not be cloned

解决：用vue3 的toRaw方法，将代理的对象转换为普通对象

 以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。官网

 setTimeout(callback, ms); ms 为NaN时会立即执行。

倒计时到某时间点后，请求接口更新当前时间，需要在接口返回后，再递归。

 vue行内prop对象会重复触发watch函数， 如

 <Test :a="[1, 2, 3]" :b="num" />

<!--Test.vue-->
<template>
  <div>12123{{ b }}</div>
</template>
<script>
export default {
  props:['a','b'],
  watch: {
    a: {
      handler(val) {
        console.log('a', val); // 重复触发
      },
      immediate: true,
    },
  },
};
</script>

prop.b 发生变化时，a的watch也会触发

Vue2监听不了Set/Map 增改，Vue3可以。网上说的解决办法是在computed中，新增一个无关变量，通过改变这个变量来使其响应。 

 vue methods 中的一个方法在执行过程中被多次调用，方法中直接使用this.xx改变对象内的值的话，仅第一次执行满足预期。第二次以后的执行，由于this.data内容已被改变，造成问题。

this.a = [{a:1,b:2,c:3},{a:1,b:2,c:3}]

组件prop接收引用类型数据（[], {}），将prop赋值给组件的data变量，组件中修改data变量会更新父组件传入的prop的内容。

this.data中的item已经在dialog中双向绑定，（vue执行了defindProperty了）
dialog 中emit(这些已经defineProperty的属性，到其他vue组件中作为data， defineProperty，此时，这个data没有双向绑定
例子：
component A  emit('xxx', this.arrs)
component B 得到componentB返回的this.arrs，并赋值到component B的data对象中

vue2有些情况，修改对象的属性变化，不会更新到视图上
使用this.$set()来设置，很有可能这个对象原来没有，是新增的。

vue 做组件的时候要注意emit出来的引用类型参数（对象，数组等）
这些对象会被组件外修改，需要评估是否会造成组件内部变化。
因此emit 的参数最好考虑使用深拷贝。

如果在webpack中，不使用.vue模板文件，而是直接在js中引入vue后，new Vue来写template，则控制台会报错，需要配置webpack resolve.alias.vue = 'vue/dist/vue.js'

vue3 不兼容vue2 的v-model,所以别折腾了。看vue3官方文档吧。

vue optional api 中export default 之前写的变量，在不同组件间是共用的，所以，尽量不要写变量在公共。这次把setTimeout返回值写在公共变量中，导致组件间互相clearTimeout。

<script>
let _aa = null // 这里的变量，如果该组件被多次使用，则这个变量会共用。
export default {
    ...
}
</script>

用v-bind="$attr"将当前接收的参数传递给子组件，v-bind,在Vue3中有优先级，Vue2中始终会把自定义的prop覆盖v-bind中的同名prop。vue3会根v-bind在标签中的声明顺序决定。

参考文档

 状态管理中深度引用问题。拿一个其他对象替换状态管理中的某对象，若状态中该对象发生改变。则那个源对象也发生改变。

eg: 

const obj = {a:1};
store.state.obj = obj;
// if
store.state.obj.a = 2;
// 则
obj.a === 2;

因此如果想要obj 可重复使用的话。则需要进行深拷贝再赋值给store.state

多层slot 或<component></component> 标签下的。

子组件会实例化多次？

如 a.vue slot => b.vue => c.vue。

未确定是多层slot引起还是 component标签slot引起。vue2.7

activated 钩子:

vue2: 被 keep-alive 缓存的组件激活时调用

vue3: 当组件被插入到 DOM 中时调用