zayyo的博客

对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。常用生命周期对比如下表所示。Tips： setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地去定义。

【代码】前端工具宝库，帮你解决99%的业务需求难题。

相信大家对Vue的不陌生。在使用Vue的时候也会遇到报错，也会使用浏览器的F12 来查看报错信息。但是你知道Vue是如何进行异常抛出的吗？vue 是如何处理异常的呢？接下来和大家介绍介绍，Vue是如何处理者几种常见的报错的。先很大家说说常见的报错，再和大家介绍如何处理。

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue

在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。我们先来看一个最简单的props传递：在前面，我们的props选项是使用一个数组。我们说过，除了数组之外，我们也可以使用对象，当需要对props进行类型等验证时，就需要对象写法了。验证都支持哪些数据类型呢？StringNumberBooleanArrayObjectDateFunctio

我们在日常使用axios时都是直接使用axios.request(config)来发送请求和instance.interceptors.request.use()来进行响应拦截，但是如果后期axios这个项目不再维护了，或者我们要换成别的网络请求方式了。这样又怎么办呢？难道我们要一处一处的起修改我们的代码吗？重构我们的请求模块？这样不仅会给我们带来大量的工作量，而且代码的耦合度太高也会导致代码如果出现bug。但是如果我们把axios在进行封装，封装出一个axios类，然后只让实例依赖axios，我们

vue3中引入element-plus的Icon最近使用element-plus开发项目，发现element-plus废弃了Font Icon 使用了 SVG Icon。需要在全局注册组件，或者按需引用。安装#使用包管理器#选择一个你喜欢的包管理器NPM$ npm install @element-plus/icons-vueYarn$ yarn add @element-plus/icons-vuepnpm$ pnpm install @element-plus/icons-vue全

首先如果我们使用的是volar，在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。// tsconfig.json{“compilerOptions”: {// …“types”: [“element-plus/global”]}}第二、需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件npm install -D unplugin-vue-components unplu

Computer：computed是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。区别是:computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当msg属性值没有发生改变时, 多次访问 reversedMsg 计算属性会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数

我们先来解释一下VNode的概念：目前我们先理解HTML元素创建出来的VNode；VNode的全称是Virtual Node，也就是虚拟节点；事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode； Virtual DOM是对DOM的抽象,本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述如果我们不只是一个简单的div，而是有一大堆的元素，那么它们应该会形成一个VNode Tree为什么需要Virtual DOM既然我们已经有了DOM,为

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢？我们先来看一下官方的解释：key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；详细来说，我们知道，vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以

首先，在用法上的区别：v-show是不支持template；v-show不可以和v-else一起使用；其次，本质的区别：v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行切换；v-if当条件为false时，其对应的元素压根不会被渲染到DOM中；v-show 具有较高的初始化性能成本上的消耗，但是使得转换状态变得很容易。 相比之下，v-if 才是真正「有条件」的：它的加载是惰性的，因此，若它的初始条件是 false，它就不会做任何事情。

MVC和MVVM都是一种软件的体系结构MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；通常情况下，我们也经常称Vue是一个MVVM的框架。Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。今天我们主要讲MVVM模式，这也是面试中最常被问到的模式。MVVM的全称是Model-View-ViewModel。

认识Vue什么是渐进式框架呢？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。如何使用Vue呢？Vue的本质，就是一个JavaScript的库；我们不需要把它想象的非常复杂； 我们就把它理解成一个已经帮助我们封装好的库；在项目中可以引入并且使用它即可。

认识Mixin（混入）混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。应用场景和项目需要当我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；一

v-model的基本使用表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据

条件渲染在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。Vue提供了下面的指令来进行条件判断：v-ifv-elsev-else-ifv-showv-if、v-else、v-else-if用于根据条件来渲染某一块的内容：这些内容只有在条件为true时，才会被渲染出来；这三个指令与JavaScript的条件语句if、else、else if类似v-if的渲染原理：v-if是惰性的；当条件为false时，其判断的内容完全不会被渲染或者会被

v-once指令v-once用于指定元素或者组件只渲染一次：p当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；p该指令可以用于性能优化；如果是子节点，也是只会渲染一次：v-text指令用于更新元素的 textContent：v-html默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。p如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；v-prev-pre用于跳过元素和它的子元素的编译过程

一. 认识Vue.js1.1. 认识VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。全程是Vue.js或者Vuejs；什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；1.2. Vue的安装Vue是一个JavaScript的库，刚开始我们不需要把它想象的非常复杂，我们就把它理解成一个已经帮助我们封装好的库，在项目中可以引入并且使用它即可。那么安装和使用Vue这个JavaScript库有哪些方式

什么是侦听器呢？开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；当数据变化时，template会自动进行更新来显示最新的数据；但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了；侦听器的用法如下：选项：watch类型：{ [key: string]: string | Function | Object | Array}例子<body> <div id="app"&g

一. 理解this（为什么需要this？）1.1. 为什么使用this在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是self），但是JavaScript中的this和常见的面向对象语言中的this不太一样：常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中。也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象。但是JavaScript中的this更加灵活，无论是它出现的位置

我们在前面练习Vue的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速生成。VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。具体的步骤如下：第一步，复制自己需要生成代码片段的代码；第二步，https://snippet-generator.app/在该网站中生成代码片段；在vscode中选择选择第一个保存就可以了，以后再html文件中输入vueapp，我这里自己命名的vueapp就可以联想出自己设置的代码模板了

Document </div><!-- 模板分离 方法一、 --><script type="text/x-template" id="cpn5"> <div> <h1>标题5</h1> ...

Vue中发送网络请求有非常多的方式, 那么, 在开发中, 如何选择呢?选择一: 传统的Ajax是基于XMLHttpRequest(XHR)为什么不用它呢?非常好解释, 配置和调用方式等非常混乱.编码起来看起来就非常蛋疼.所以真实开发中很少直接使用, 而是使用jQuery-Ajax选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax相对于传统的Ajax非常好用.为什么不选择它呢?首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了.那么, 就意味着为了方便

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能State：就是我们的状态，类似data中的属性View：视图层，可以针对State的变化，显示不同的信息Actions：这里的Actions主要是

Promise是异步编程的一种解决方案。什么是异步编程就自己去查吧，网上有很多介绍了，这里就不详细介绍了我们先来看看Promise最基本的语法。这里，我们用一个定时器来模拟异步事件：promise会对异步函数进行封装，promise函数需要传入两个参数，分别是resolve(解决，请求成功),和reject(拒绝，请求失败)。而resolve和reject又是两个函数，在promise函数里面输入resolve时，如果请求成功介绍执行.them()里面的函数体，若请求失败reject()就会生效，

认识路由路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. — 维基百科路由是决定数据包从来源到目的地的路径.转送将输入端的数据转移到合适的输出端.路由表本质上就是一个映射表, 决定了数据包的指向.**vue-router基本使用** **URL的hash** URL的hash也就是锚点(#), 本质上是改变window.location的href属性. 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新 ![在这里插入图片描

vue create vite创建项目create-vite-app 项目名称通过 vue ui 命令以图形化界面创建和管理项目vue ui

在这里插入图片描述

Runtime-Compiler和Runtime-only的主要区别在main.js文件中Runtime-Compiler（内部执行步骤）template -> ast -> render -> vdom -> UIRuntime-only（内部执行步骤）[优势:1.性能更高 2.代码量更小 3.占用的空间更小]render -> vdom -> UI...

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。**父组件访问子组件：**使用children或children或children或refs**子组件访问父组件：**使用$parentthis.$children是一个数组类型，它包含所有子组件对象。我们这里通过一个遍历，取出所有子组件的message状态。通过访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。但是当子组件过多我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。有时候

子组件想父组件传输关键代码 this. $emit(“发送事件的名称”，‘发送的参数’)template父组件接收事件，通过v-on来监听事件 ,监听子组件发过来的事件script在script还要写一个方法来接收子组件传过来的数据例子.........

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

// 1.属性的简写let name = 'why'1et age■18// ES6之前let obj1 = {name: name,age: age}console. 1og(obj1);// ES6之后let obj2 = {name, ageconsole. 1og(obj2);// 2.方法的简写// ES6之前let obj1 = {test: function O {console.1og( obj 1的tes t函数');}obj1. testO/

npm ERR! code ENOSELFnpm ERR! Refusing to install package with name “vuex” under a packagenpm ERR! also called “vuex”. Did you name your project the samenpm ERR! as the dependency you’re installing?npm ERR!npm ERR! For more information, see:npm ERR!

Document <!--template中支持驼峰写法可以写回驼峰写法，而且当template中药在最外层加div为根框架 --><template id="cpn"> <div> <ul> <li v-for="item in cmovies">{{it...

Document </div><!-- 模板分离 方法一、 --><script type="text/x-template" id="cpn5"> <div> <h1>标题5</h1> ...

在JavaScript我们常常会对数组进行很多需求上的操作，比如求取数组中的偶数，或者是查找数组中的某一个值。如果我们使用for循环的方法进行遍历数组，进行需求操作。往往效率很低，并且吃力不讨好。这时我们就可以使用JavaScript里数组的内置函数来对数组进行操作。这样效率不仅会大大提高还可以减轻我们编写代码的压力，使得我们编写的代码看起来更加简洁。接下来我们就详细介绍一下我们数组中的函数的详细使用方法需求：获取数组中为偶数的值第一步、使用数组的内置函数‘filter’,-----nums.filter

Document 书籍名称 出版日期 价格 购买数量 操作 ......