2022-01-18:组件传值、vue部分生命周期、不需要响应的数据的处理、父子组件生命周期顺序、对象及数组更新视图

1、组件传值——$attrs$listeners

$attrs:父作用域的绑定,props中的内容除外。(接收了除props声明外的所有绑定属性,ps:class、style除外)
$listeners:父作用域中的不含native修饰符的绑定事件。
资料

  • 父组件通过v-bind绑定一个数据传递给子组件,子组件通过props接收到就可以在子组件的html中使用了。但是,如果父组件v-bind传递给子组件,子组件没有用props接收,这个时候,父组件传递过来的数据就会被挂载(赋值)到这个子组件自带的对象$attrs上面。


    image.png

2、vue部分生命周期

  • activated:被keep-alive缓存的组件被激活时调用;
  • deactivated:被keep-alive缓存的组件被停用时调用;
  • errorCaptured

3、不需要响应的数据的处理

  • 定义在data之外
  • Object.freeze(xxx)

4、父子组件生命周期顺序

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

5、对象及数组更新视图

原因:Object.defineProperty没有对对象的新属性以及数组进行属性劫持
对象新属性无法更新视图:使用Vue.$set(obj, key, value),组件中this.$set(obj, key, value)
删除属性无法更新视图:使用Vue.$delete(obj, key),组件中this.$delete(obj, key)
使用数组的splice方法,arr.splice(index, 1, item)
使用Vue.$set(arr, index, value)

参考文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。