每天学习一点前端知识-VUE（五）

21. Vue.extend()作用（Vue3中被移除）

1. Vue.extend 概念
   • 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意在 vue.extend 中它必须是函数。
2. 分析
   • 所有的组件创建时都会调用 vue.extend 方法进行创建。
   • 有了此方法我们可以用于手动挂载组件。
   • 后端存储的字符串模板我们可以通过 Vue.extend 方法将其进行渲染，但是需要引入编译时。

Reference: Vue3.0中对Vue2.0全局API extend 的替代方案

22. vue的组件中为什么data必须是一个函数（vue2）

• 如果组件中的data不是一个函数，首先vue是会报错的，因为它内部规范组件中的data必须是个函数。
• 在Vue中，将data定义为一个函数是为了确保每个组件实例都拥有独立的数据副本。这是因为Vue的组件可能会被多次复用，如果data直接定义为一个对象，那么所有复用的组件实例将共享同一个数据对象，因为对象是引用类型，这样会导致数据污染，即一个实例对数据的修改会影响到其他所有实例。而将data定义为一个函数，可以保证每个组件实例在创建时都会调用这个函数并返回一个新的数据对象，每个实例都有自己的数据副本，互不干扰。

        在Vue3中，数据、方法、计算等不再直接写为组件中的配置对象。相反，组件中使用的数据和方法被写入函数中setup()，该函数作为在组件内使用 Composition API 的入口点。它必须有一个返回值，以便可以在模板中直接使用返回对象的属性和方法。

23. 函数式组件的优势（不建议使用，性能提升不多）

• 函数式组件是Vue.js中一个轻量级的抽象，本质上是一个无状态的Vue组件，不维护任何的内部状态，也不会导致任何副作用。函数式组件只是一个接收props并返回virtual DOM的函数。
• 函数式组件的优势在于它们是轻量的，因为它们不会创建一个完整的Vue实例，不跟踪内部状态，不包含生命周期钩子，也不关心依赖的检测。
• 主要原因为不会调用 _init 的过程（生命周期图中看到那个 _init）。Vue3抛弃了使用 new Vue() 创建实例的过程，改用 Vue.createApp() 创建应用实例。

24. Vue中的过滤器及应用场景

• 过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解成纯函数。
• 常见场景：单位转换、千分符、文本格式化、时间格式化等操作。Vue3果断废弃了过滤器。

25. v-once的使用场景有哪些

• 原理是缓存虚拟节点 cache[0]。
• 当在 v-for 上使用时，v-once 会提取到上一层。
• Vue3中使用 v-memo.