热爱前端的大三在校生

继上一篇文章，我们已经能够实现一个简单的响应系统了，但是仍然存在很多缺陷，本篇文章将具体叙述一下存在的缺陷以及如何解决，最后实现一个较为完善的响应式系统。

所谓副作用函数指的是会产生副作用的函数：函数的执行会直接或间接影响其他函数的执行，换句话说就是当函数调用的时候会对外部产生影响let val=1//全局变量val=2//修改全局变量，产生副作用}上面的代码中，在effect函数里对全局变量val进行了修改，如果之后有其他函数也用到了该全局变量，那么用的是修改后的值。通过这种方式就影响了其他函数执行的结果比如，一个函数foo返回值是val的平方，那么foo函数在effect函数执行前执行得到的结果是1，而在effect函数执行后执行的结果为4。

vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）过滤器分全局过滤器和局部过滤器，全局过滤器在项目中使用频率很高，要掌握过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。

数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。一般混入都是在单组件内应用比较合适也可以进行全局注册。

子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。如果只想页面加载时显示一次，后续不在因为数据信息的变动而变动时，就可以采取v-once实现。很有意思，当你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加v-onceattribute 以确保这些内容只计算一次然后缓存起来，这样就大大减小了性能开销。`})但是不要过度使用这个模式，尤其是该组件在未来有可能要进行数据更新的情况下不要使用；

Vue生命周期钩子剖析，告别一知半解

知识积累

本文涵盖Vue2和Vue3，一篇文章带你彻底搞懂Vue数据响应式原理以及响应的过程

有关原生js和vue中的this问题想必困扰大家很久了，今天这一篇文章让你彻底搞懂this，以后麻麻再也不用担心我遇到this问题啦，让我们开始this的学习之旅吧