content6的博客

【代码】Object.defineProperty和Proxy实现双向绑定。

toRefs是把一个响应式对象变成普通对象，这个对象每个属性都指向源对象相应属性的ref；toRef可以把一个响应式对象的属性也变成响应式，这样创建的ref与其源属性保持一致;unRef是一个语法糖，如果参数是ref，返回它的内部值，否则返回它本身，相当于。isRef检查某个值是否是ref；

深度选择器处于scoped样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用:deep()这个伪类插槽选择器默认情况下slot插槽的内容属于父组件，作用域样式不会影响渲染出来的内容，使用:slotted可以将选择插槽内容全局选择器如果希望一个样式应用到全局，可以使用:global伪类来实现。标签会被编译为css modules并将生成的css class作为$style暴露给组件使用。

【代码】watch一次、深度watch、访问dom更新后的`eleRef`

ref是通过一个中间对象RefImpl持有数据，并重写它的set和get方法实现数据劫持的，本质上是通过Object.defineProperty对RefImpl的value属性进行劫持。2. ref需要通过value属性间接的访问数据，（在templates中vue做了自动展开），而reactive可以直接访问。3. 可以给ref的值重新分配给一个新对象，而reactive只能修改当前代理的属性，否则会破坏响应性。5. watch()默认情况下只监听ref的value，而对reactive执行深度监听。

创建一个effect作用域，可以捕获其中所创建的响应式副作用（即计算属性和侦听器），捕获到的副作用可以一起处理。watchEffect立即运行一个函数，同时响应式地追踪其依赖，在依赖更新时重新执行。比如要实现watchEffect在执行一次后停止，需要使用effectScope()2.不需要传递侦听的内容，会自动感知代码依赖，只要传递一个回调参数就行。3.不能获取以前的数值，只能获取当前值。将会使侦听器延迟到组件渲染之后再执行。1.立即执行，没有惰性。

大多数情况使用vue模板语法创建应用，在某些场景下，需要用到JavaScript完全的编程能力，这时就用到渲染函数了。h()是hyperscript的简称，代表“能生成HTML的JavaScript”.当组合式API与模板一起使用时，setup()钩子的返回值是用于暴露数据给模板。

【代码】渲染函数[h()]实例。

【代码】useCounter计数器。

watchEffect：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。watchEffect的特点可以查看。

相同点：v-if与v-show都可以动态控制dom元素显示隐藏不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。都修改为false后，第一个div是直接被移除掉了需要注意的是，当一个元素默认在css中加了display：none属性，这时通过v-show修改为true是无法让元素显示的。原因是显示隐藏切换，只是会修改element style为display:""或者display:none,并不会

customRef 用于创建一个自定义的ref，显式声明对其依赖追踪和更新触发的控制方式。

注入一个由祖先组件或整个应用 (通过。提供一个值，可以被后代组件注入。

computed可以接受一个get、set函数的对象，变成可写的computed（创建一个可写的 ref 对象）。

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。缓存树的一部分，当组件被插入到 DOM 中时调用。缓存树的一部分，当组件从 DOM 中被移除时调用。注册一个钩子，在捕获了后代组件传递的错误时调用。注册一个回调函数，在组件实例被卸载之后调用。注册一个回调函数，在组件挂载完成后执行。注册一个钩子，在组件实例被卸载之前调用。注册一个钩子，在组件挂载之前调用。注册一个回调函数，若组件实例是。

内置组件无需注册便可以直接在模板中使用。它们也支持 tree-shake：仅在使用时才会包含在构建中。包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。将其插槽内容渲染到 DOM 中的另一个位置。任何时候都只能有一个活跃组件实例作为。中使用它们时，需要显式导入。生命周期钩子将被调用，用来替代。的直接子节点及其所有子孙节点。缓存包裹在其中的动态切换组件。元素或组件提供动画过渡效果。元素或组件提供过渡效果。

编写一个可组合函数useToggle。