Vue3 学习笔记

Vue3 简介：

1. 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
2. github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

1. Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

2. Vue 只关注视图层， 采用自底向上增量开发的设计。

3. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

4. 无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 有两个核心功能：声明式渲染和响应式。

      声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

      响应式：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM（Document Object Model）。

    首先从简单示例开始讲：我们第一步：安装应用 Vue.js。第二步：通过 Vue.createApp({...}) 创建 Vue应用实例。第三步：创建 HTML 模板。第四步：在根元素上挂载应用实例，返回根组件实例对象。注意的一点就是要应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串,我们可以在DOM中创建根组件模板并与Vue的根组件对象进行挂载。

页面展示为：

第二阶段我们学了模板语法也就是声明式渲染，在底层机制中，Vue会将模板编译成高度优化的JavaScript代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作。这一切都基于虚拟DOM。

文本插值：它使用了基本的数据绑定形式，使用了双大括号的语法（{{}}），双大括号标签会被替换为相应组件实例中msg属性的值。同时每次 msg 属性更改时它也会同步更新。

1. 功能: 用于解析标签体内容

2. 语法: {{xxx}} ，xxxx

原始HTML：如果想插入HTML，我们需要使用v-html指令。

属性绑定：除了插值，我们还可以使用vue为DOM动态，响应式的绑定属性。我们在这里需要借助v-bind指令。v-bind指令指示Vue将元素的id属性与组件的dynamicId属性保持一致。如果绑定的值是null或者undefined，那么该 属性将会从渲染的元素上移除。

1. 功能: 解析标签属性、解析标签体内容、绑定事件

2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析

3. 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

布尔型属性：属性依据true / false值来决定属性是否应该存在于该元素上。 disabled就是最常见的例子之一。当isButtonDisabled为真值或一个空字符串时，元素会包含这个disabled attribute。而当其为其他假值时attribute将被忽略。

使用JavaScript表达式：

指令：指令是带有v-前缀的特殊属性。Vue提供了许多内置指令，包括上面我们所介绍的v-bind和v-html。一个指令的任务是在其表达式的值变化时响应式地更新DOM。

动态参数：除了指令参数的值是动态的以外，我们还可以动态的设置指令的参数，需要包含在一对方括号[]中。

页面展示：

响应式基础：

选用选项式API时，会用data选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例上。你需要确保它们都出现在data函数返回的对象上。若所需的值还未准备好，在必要时也可以使用null、undefined 或者其他一些值占位。Vue 在组件实例上暴露的内置API使用 $ 作为前缀。它同时也为内部属性保留 _ 前缀。因此，你应该避免在顶层data上使用任何以这些字符作前缀的属性。

声明方法：要为组件添加方法，我们需要用到methods选项。它应该是一个包含所有方法的对象。定义的方法常常在模板中被用作事件监听器，increment 方法会在被点击时调用。

DOM 更新时机：DOM的更新并不是同步的。Vue将缓冲它们直到更新周期的下个时机以确保每个组件都只需要更新一次。

深层次响应性：在Vue中，状态都是默认深层响应式的。如果我们更改更深层次的对象或数组，我们的改动也能被检测到。

页面展示：

计算属性：

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑太过复杂，会让模板难以维护。

1. 要显示的数据不存在，要通过计算得来。

2. 在computed对象中定义计算属性。

3. 在页面中使用{{方法名}}来显示计算的结果。

两种方式在结果上确实是完全相同的，不同之处在于计算属性值会基于其响应式依赖被缓存。只要author.books不改变，无论多少次访问publishedBooksMessage都会立即返回先前的计算结果，而不用重复执行getter函数。相比之下，方法调用总是会在重渲染发生时再次执行函数。

可写计算属性：计算属性默认是只读的。当我们尝试修改一个计算属性时，会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建，当我们再运行this.fullName = 'John Doe'时，setter会被调用而this.firstName和this.lastName会随之更新。

页面展示：

类与样式绑定：

类与样式绑定的绑定，是属性绑定中的一个常见需求场景，因为class和style都是DOM元素的属性，所以和其他属性一样使用v-bind将他们和动态的字符串进行绑定。且，Vue专门为class和style的v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

1. 在应用界面中, 某个(些)元素的样式是变化的

2. class/style 绑定就是专门用来实现动态样式效果的技术

绑定 HTML class：active是否存在取决于数据属性isActive的真假值此外，:class指令也可以和一般的 class attribute 共存。我们还可以给 :class绑定一个数组来渲染多个CSS class。

1. :class='xxx'

2. 表达式是字符串: 'classA'

3. 表达式是对象: {classA:isA, classB: isB}

4. 表达式是数组: ['classA', 'classB']

绑定内联样式：:style支持绑定JavaScript对象值，对应的是HTML元素的style属性，我们还可以给 :style绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上，数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为display: flex。

1. :style="{ color: activeColor, fontSize: fontSize + 'px' }"

2. 其中 activeColor/fontSize 是 data

页面展示：

条件渲染：

v-if：该指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

v-else：可以使用v-else为v-if添加一个else区块，一个v-else元素必须跟在一个v-if或者v-else-if元素后面，否则它将不会被识别。

v-else-if：v-if 、 v-else 和 v-else-if 也可以在 上使用。

v-show：另一个可以用来按条件显示一个元素的指令是v-show，不同之处在于v-show会在DOM渲染中保留该元素；v-show仅切换了该元素上名为 display的CSS 属性。而v-show不支持在元素上使用，也不能和v-else搭配。

比较 v-if 与 v-show：v-if是按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。v-if也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次 变为 true 时才被渲染。相比之下，v-show简单许多，元素无论初始条件如何，始终会被渲染，只有CSS display属性会被切换。 总的来说，v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则v-if会更合适。

1. 如果需要频繁切换 v-show 较好

2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

页面展示：

列表渲染：

v-for：我们可以使用v-for指令基于一个数组来渲染一个列表。 v-for 指令的值需要使用item in items形式的特殊语法，其中items是源数据的数组，而 item是迭代项的别名，在v-for块中可以完整地访问父作用域内的属性和变量。 v-for也支持使用可选的第二个参数表示当前项的位置索引。

v-for 中解构：定义v-for的变量别名时使用解构，和解构函数参数类似。

嵌套v-for：对于多层嵌套的v-for，作用域的工作方式和函数的作用域很类似。每个v-for作用域都可以访问到父级作用域，也可以使用of作为分隔符来替代in，这更接近JavaScript的迭代器语法。

v-for与对象：我们可以使用v-for来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用Object.keys()的返回值来决定。

v-if和v-for：v-if和 v-for是不可以同时出现在一个元素上的，因为if的优先级要高于for会导致无法获取for里的变量。

通过key管理状态：Vue默认按照就地更新的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

列表显示指令：

遍历数组: v-for / index

遍历对象: v-for / ke

页面显示：

    Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括： push() 向数组的末尾添加一个或多个元素，并更新数组 pop() 用于删除不能够返回数组的最后一个元素 shift()用于删除数组中的第一个元素，并更新新数组 unshift() 向数组开头添加一个或多个元素，并更新数组 splice() 向/从数组中添加/删除元素，并返回被删除的元素 splice( index, len, [item]) 用来删除/替换/添加数组内某一个或者几个值（该方法会改变 原始数组）。   【示例】用户增删改查：array.splice(index,howmany,item1,.....,itemX); index：必传，从何（位置）添加/删除元素 howmany：可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从index开始到原数组结尾的所有元素。 item1, ..., itemX：要添加到数组的新元素。

页面展示：

事件处理：

访问事件参数：有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数。

绑定监听：

1. v-on:xxx="fun"

2. @xxx="fun"

3. @xxx="fun(参数)"

4. 默认事件形参: event

5. 隐含属性对象: $event

事件修饰符：

1. .prevent : 阻止事件的默认行为 event.preventDefault()

2. .stop : 停止事件冒泡 event.stopPropagation()

按键修饰符：

1. keycode : 操作的是某个 keycode 值的键

2. .keyName : 操作的某个按键名的键(少部分)

计算属性-computed：

1. 要显示的数据不存在，要通过计算得来。

2. 在 computed 对象中定义计算属性。

3. 在页面中使用{{方法名}}来显示计算的结果。

监视属性-watch：

1. 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性

2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

页面展示：

表单输入绑定：

Vue提供了v-model指令，来简化表单数据绑定的过程，上述代码等价于 <input v-model="text"/>

<textarea>、<select>元素也同样可以适用。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合。

1. input、textarea :绑定value属性，并侦听 Input 事件
2. checkbox 、radio :绑定checked属性，并侦听change事件
3. select 会绑定 value属性，并侦听change事件

基本用法：文本、多行文本、复选框、单选按钮、下拉列表框（如果 v-model 表达式的初始值不匹配任何一个选择项，）。

值绑定：Vue提供了特殊属性，可以实现value值的动态绑定。

修饰符：.number修饰符会在输入框有type="number" 时自动启用，如果该值无法被parseFloat()处理，那么将返回原始值。

.trim：自动去除用户输入内容中两端的空格，可以使用.trim修饰符。

页面展示：

生命周期：

Vue组件实例在创建时都需要经历一系列的初始化步骤,在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

1) 初始化显示

* beforeCreate() 会在实例初始化完成、props 解析之后、data()和 computed 等选项处理之前立即调用。

* created() 在组件实例处理完所有与状态相关的选项后调用。

* beforeMount() 在组件被挂载之前调用。

* mounted() 在组件被挂载之后调用。

2) 更新状态: this.xxx = value

* beforeUpdate() 在组件即将因为一个响应式状态变更而更新其DOM树之前调用。

* updated() 在组件因为一个响应式状态变更而更新其DOM树之后调用。

3) 销毁 vue 实例: vm.$destory()

* beforeDestory()

* destoryed()

常用的生命周期方法:

1. mounted(): 发送 ajax 请求, 启动定时器等异步任务

2. beforeDestory(): 做收尾工作, 如: 清除定时器

页面展示：

侦听器：

计算属性允许我们声明性的计算衍生值，有时候我们需要通过捕捉某个DOM或异步操作的结果，修改另一处的状态属性。我们可以使用侦听watch来解决这一问题。

侦听对象：watch 选项也支持把键设置成用 . 分隔的路径，当对象中的属性很多都需要侦听时，我们可以开启深层侦听器。

深层侦听器：watch默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。但是深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大，所以要谨慎使用。

即时回调：watch默认是懒执行的：当数据源变化时，才会执行回调。

回调的出发时机：用户创建的侦听器回调，都会在 Vue 组件更新之前被调用，想在侦听器回调中能访问被 Vue 更新之后的DOM，我们需要指明 flush: 'post' 选项。

this.$watch()：在特定条件下设置一个侦听器，我们也可以使用组件实例的 [ $watch() 来命令式地创建一个侦听器。

停止侦听：用watch选项或者 $watch() 实例方法声明的侦听器，会在宿主组件卸载时自动停止。在少数情况下，你的确需要在组件卸载之前就停止一个侦听器，这时可以调用 $watch() API返回的函数。

页面展示：