Vue3入门 | 😈Zabanya’s Blog

⚠️本篇笔记大部分基于 vuejs/core/3.0.11 版本

💡

理解MVVM框架

可以理解为 Model 和 View 是保持一致的（最终目的），二者发生改变都会通知 ViewModel 改变另一方

一、Vue引入

方法一：CDN引入

CDN称为内容分发网络（Content Delivery Network 或 Content Distribution Network），它是指通过相互连接的网络系统，利用最靠近每个用户的服务器；

更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户；

引入代码如下：

方法二：本地引入

即把vue.js核心代码（打包版本）直接下载到本地后引入

二、模板语法

1. template

方法一：script标签 + x-template类型

方法二：template标签

2. 关于methods

不能使用箭头函数（箭头函数隐式绑定父级作用域上下文），关于this的详解

前端面试之彻底搞懂this指向

this是JavaScript中的一个关键字，但是又一个相对比较特别的关键字，不像function、var、

https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA

3. Mastache语法 {{}}

4. 基础指令

5. 常用语法

5.1 v-bind 动态(data)绑定属性

最基础的用法如下，绑定属性和变量：

▪️关于动态调整 class

1️⃣ 对象语法

2️⃣ 数组语法

▪️关于动态调整 style

1️⃣ 对象语法

2️⃣ 数组语法

▪️关于动态绑定属性

1️⃣ 常用于自定义组件

2️⃣ 高阶组件使用

5.2 v-on绑定事件 / @

▪️基本用法

▪️事件传入参数

▪️修饰符

v-on 支持修饰符，修饰符相当于对事件进行了一些特殊的处理：

.stop - 调用 event.stopPropagation()

.prevent - 调用 event.preventDefault)

.capture - 添加事件侦听器时使用 capture 模式

.self －只当事件是从侦听器绑定的元素本身触发时才触发回调

.{keyAlias} - 仅当事件是从特定键触发时才触发回调

.once - 只触发一次回调

.left - 只当点击鼠标左键时触发

.right - 只当点击鼠标右键时触发

.middle －只当点击鼠标中键时触发

.assive - { passive: true }模式添加侦听器

注意： .enter 指的是按下回车键才触发某个事件； event.target.value 其参数event中的 event.target.value 指输入框的内容

5.3 条件渲染

1️⃣ v-if / v-else-if / v-else

2️⃣ v-show

与v-if不同的是，当v-show为false时，其display: none;（不显示），且v-show不支持template 和 v-else同时使用

💡 通常元素不需要频繁显示和隐藏就使用 v-if

5.4 列表渲染 v-for

在使用v-for进行列表渲染时，建议会给元素或者组件绑定 key 属性，根据官方解释其目的在于：key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。

如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素。

💡

VNode 概念

我们先从HTML元素创建出来的VNode进行理解，VNode的全称是Virtual Node，也就是虚拟节点。事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode，VNode的本质是一个JavaScript的对象。

E.g.有以下html元素，我们转为VNode

如果我们不只是一个简单的div，而是有一大堆的元素，那么他们应该会形成一个VNode Tree：

⚠️ 但需要注意的是，组件并不会在虚拟DOM中渲染

▪️对于Key的判断

▪️无Key操作

我们会发现上面的diff算法效率并不高，因为对于c和d来说它们事实上并不需要有任何的改动。但是因为我们的c被所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增。

▪️有Key操纵

从头开始进行遍历、比较

a和b是一致的，会继续进行比较；c和f因为key不一致，所以就会break跳出循环。

从尾部开始进行遍历、比较

如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点

如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点：

最后是最特色的情况，中间还有很多未知的或者乱序的节点：

💡 所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：在没有key的时候我们的效率是非常低效的；在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；

例如以下是一个使用的例子：

5.5 数组更新检测

▪️Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

▪️替换数组的方法：上面的方法会直接修改原来的数组，但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()。

5.6 v-model

▪️底层原理：

v-model 绑定修改后默认的类型是 string（原来是number类型也会改string）

修饰符：

1️⃣ v-model.lazy（按回车的时候触发）；

2️⃣ v-model.num（强制将输入框文本强制从string 转换为 number）；

3️⃣ v-model.trim（删除前后空格）

6. Options-API

6.1 计算属性computed

源码位置：「src/comonentOptions.ts」-670行 if (computedOptions)

method与computed不同在于，computed可以实现缓存；计算属性将被混入到组件实例中。所有 getter 和 setter 的 this 上下文自动地绑定为组件实例；

6.2 侦听器watch

监听 data 中的数据的变化，且默认情况下只会针对数据（非对象）本身的改变（如对象内部发生改变无法侦听），如需要侦听内部改变需要使用深度侦听（监听对象变化），且为浅拷贝（内存指向相同，即需要原来的值需要自己用变量储存 → 深拷贝） lodash.js

💡 如果需要侦听对象数组的变化，需要将改对象数组数据传入组件，并通过 v-for 遍历（即将数组拆分为若干对象，然后通过 props 接受数据，并检测 props 中的属性变化）

三、阅读源码提Tips

附录：yarn安装：npm install -g yarn

然后在「packages-vue-example」中创建测试项目文件夹，并且需重新执行git上传流程