day-3-CSDN博客

本文链接：https://blog.csdn.net/m0_55316631/article/details/120957654

本文深入探讨了Vue.js中的组件插槽如何增强组件的扩展性，允许用户自定义显示内容。同时，文章详细解释了Vue的响应式原理，基于Object.defineProperty实现的数据劫持和setter/getter，以及双向数据绑定的实现机制。此外，还介绍了Vue中的指令钩子函数及其在组件生命周期中的作用。最后，简要讨论了Vue中父子组件通信的方法，如props、$emit和$bus。

摘要由CSDN通过智能技术生成

插槽（slot）:

抽取共性，保留不同

一，为什么使用slot：

slot译为插槽组件的插槽

1.组件的插槽也是为了让我们封装的组件更加具有扩展性

2.让使用者可以决定组件内容的一些内容到底展示什么

二，如何使用slot：

在子组件中，使用特殊元素<slot>就可以为子组件开启一个插槽
该插槽插入什么内容取决于父组件如何使用

Vue指令

#1、深入响应式原理

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。Vue里面是怎么做到的的呢？其实就是使用了Object.defineProperty 把Vue内的属性全部转成 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

Object.defineProperty 实现了对象劫持这个功能

语法：

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象

prop 当前需要定义的属性名

desc 属性描述符

vue的双向数据绑定原理是什么？

vue数据双向绑定是通过数据劫持结合“发布者-订阅者模式”的方式来实现的。 vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通过Object.defineProperty()对属性设置一个setter函数，当数据改变了就会来触发这个函数；

钩子函数：

bind : 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted ：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。