vue toRaw() 返回的是同一个引用
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 中时调用