zz130428的博客

Vue 的单文件组件 (即*.vue文件，英文 Single-File Component，简称SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。</style>如你所见，Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template><script>和<style>

1、删除 —— 可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除项的项数。2、插入 —— 可以向指定位置插入任意数量的项，只需要提供3个参数：插入起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，一直任意多个项。3、替换 —— 可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需要指定3个指定参数：起始位置、要删除的项数和要插入的任意数量项。插入的项数是不必与删除的项数相等。

标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行。中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。实现数据响应式的，直接动态添加新属性仍可以实现数据响应式。不允许在已经创建的实例上动态添加新的响应式属性。应创建一个新的对象，合并原对象和混入对象的属性。点击按钮，发现结果不及预期，数据虽然更新了（添加新属性的时候，却无法触发事件属性的拦截。如果为对象添加少量的新属性，可以直接采用。如果需要为新对象添加大量的新属性，则通过。方法，实现新增属性的响应式。

源码位置：src\platforms\web\runtime\index.js。方法，但发现本文件中并没有此方法，但仔细可以看到文件下方定义了很多初始化方法。源码位置：src\core\instance\lifecycle.js。源码位置：src\core\instance\render.js。源码位置：src\core\instance\index.js。源码位置：src\core\instance\state.js。源码位置：src\core\instance\init.js。的挂载，因此无法访问到。

我们都听过知其然知其所以然这句话那么不知道是否思考过new Vue()这个过程中究竟做了些什么？过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等首先找到vue的构造函数源码位置：src\core\instance\index.js是用户传递过来的配置项，如等常用的方法vue构建函数调用_init方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法。

在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理vue。vue中修饰符分为以下五种：表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。源码位置：src\core\observer\index.js。，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。变更，它和被返回的对象是同一个对象。在非父子组件通信时，可以使用通常的。中，被传入的对象会直接被。翻译过来我们可以理解成。

Vite 的构建速度比 Webpack 更快，因为 Vite 在开发环境下使用了浏览器原生的 ES 模块加载，而不是像 Webpack 一样使用打包后的文件进行模块加载。：Vite 的配置相对更简单，因为它无需进行大量的配置，只需指定一些基本的选项就可以开始开发。：Webpack 是一个功能更加全面的打包工具，支持各种 Loader 和插件，可以处理多种类型的文件和资源。总之，Vite 更适合用于开发环境下的快速构建，而 Webpack 则更适合用于生产环境下的复杂应用程序的打包处理。

是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个。前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的。这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回。产生问题的本质是因为我们的路由是通过JS来执行视图切换的，会被包含在请求中 ，因此对于服务端来说，即使没有配置。是没有相关配置的，所以就会出现 404 的情况。模式我们都知道是用符号#表示的，如。

假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。：少量的触发，在规定的时间内是不会重复触发的，只有超过这个事件才会再次的触发。n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。当用户高频率的触发事件，事件较短，内部出现卡顿现象。电梯第一个人进来后，15秒后准时运送一次，这是节流。

Pinia和Vuex都是Vue.js状态管理库，但它们在一些方面有所不同。Pinia是一个轻量级的状态管理库，它专注于提供一个简单的API来管理应用程序的状态。相比之下，Vuex是一个更完整的状态管理库，它提供了更多的功能，比如模块化、插件和严格模式等。Pinia是基于Vue 3的Composition API构建的，这使得它更加灵活和可组合。而Vuex则是基于Vue 2的Options API构建的，因此在某些方面可能会受到限制。

watch懒执行副作用——需要手动指明侦听的内容，也要指明侦听的回调。默认 immdiate 是 false，所以初始化时不会执行，仅在侦听的源数据变更时才执行回调。不需要有返回值。可以获得变化前的值（oldVal）watchEffect自动收集依赖，不需要手动传递侦听内容——自动侦听回调函数中使用到的响应式数据默认 immdiate 是 true，所以初始化时会立即执行，同时源数据变更时也会执行回调。不需要有返回值。无法获得变化前的值（oldVal）

目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。总结：Vue3中计算属性也是组合API风格。

构建工具 Vite，目前只有vue3才可以使用Vite，如果本文对你有所帮助请三连支持博主。Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。

vue3 增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。生命周期的用法和 vue2 无太大的区别，只是使用的时候记得把 API 导入进来。

Vue 3.0内核仍然可以通过一个简单的script标签使用，但其内部结构已被彻底重写为一组解耦的模块。新的体系结构提供了更好的可维护性，并允许最终用户通过摇树来减少运行时大小的一半。Composition API建立在反应性API之上，与2.x基于对象的API相比，可实现类似于React挂钩的逻辑组成和重用，更灵活的代码组织模式以及更可靠的类型推断。composition-api，旨在解决大型应用程序中Vue使用的难点。是Vue3.0最重要的RFC（官方文档）原来叫vue-function-api。

setup(函数特性，vue3还给我们提供了provide和inject，我们可以在父组件中通过provide暴露属性或方法，子组件通过iniect接受，并且只要是父组件的后代，都可以通过iniect接收到父组件暴露的值。缺点: 代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读虽然提供了 mixins (混入) 用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。代码风格: date选项写数据，methods选项写函数，一个功能逻辑的代码分散。

Vue中应用富文本编辑器，涉及到多个富文本时需要注意的是动态数据的绑定，建议封装组件来进行使用。tinymce整体而言插件丰富、可扩展性强、页面样式可修改。TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。注意：版本可根据自己项目的情况来进行选择。

这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用。可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多。中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加。整体体积变小了，除了移出一些不常用的API，再重要的是。实例，它会在组件渲染的过程中把用到的数据。，就不需要创建对象，然后根据对象渲染。

在正式开发中，我们可能多处使用到Echarts，所以大家可以写一个EchartsCommon，把height、width和setOption定义为动态接收props，这样就方便调用啦！！

其实子传父的用法也是类似于Vue2的方式，其实也是通过子组件调用父组件的自定义方法并传递参数，我们在父组件的自定义方法中来获取参数，从而实现子组件向父组件传值，之前Vue2中是通过this.$emit 而我们的Vue3种setup没有this，这就用到了我们下面的新函数——defineEmit函数来获取emit函数。大家应该都比较熟悉Vue2中的父组件向子组件传值的方式，就是通过在子组件的标签上设置自定义属性，然后子组件通过 props 接受属性的值即可。

本文带大家从头开始学习如何实现简单版 Vue 3 响应式，实现了 Vue3 Reactivity 中的核心方法（effect/track/trigger/computed/ref等方法），提高项目开发效率和代码调试能力。

现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的。这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。内置组件进行包裹，其相当于传送门，将里面的内容传送至。主体内容需要灵活，所以可以是字符串，也可以是一段。组件内部是如何处理「确定」「取消」事件的，既然是。