Vue
0️⃣Vue3入门
00 分钟
2022-8-16
2024-8-1
⚠️本篇笔记大部分基于 vuejs/core/3.0.11 版本
 
💡
理解MVVM框架
notion image
可以理解为 Model 和 View 是保持一致的（最终目的），二者发生改变都会通知 ViewModel 改变另一方

一、Vue引入

方法一：CDN引入

CDN称为内容分发网络（Content Delivery Network 或 Content Distribution Network），它是指通过相互连接的网络系统，利用最靠近每个用户的服务器；
更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户；
引入代码如下：
 

方法二：本地引入

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

二、模板语法

1. template

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

2. 关于methods

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的判断
notion image
 
▪️无Key操作
我们会发现上面的diff算法效率并不高，因为对于c和d来说它们事实上并不需要有任何的改动。但是因为我们的c被所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增。
notion image
notion image
 
▪️有Key操纵
  1. 从头开始进行遍历、比较
      2. a和b是一致的，会继续进行比较；c和f因为key不一致，所以就会break跳出循环。
      notion image
  1. 从尾部开始进行遍历、比较
      2. notion image
  1. 如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点
      2. notion image
  1. 如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点：
      2. notion image
  1. 最后是最特色的情况，中间还有很多未知的或者乱序的节点：
      2. notion image
💡 所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：在没有key的时候我们的效率是非常低效的；在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；
 
例如以下是一个使用的例子：
 

5.5 数组更新检测

▪️Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
▪️替换数组的方法：上面的方法会直接修改原来的数组，但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()。
 

5.6 v-model

▪️底层原理：
notion image
 
 
 
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

notion image
 
附录：yarn安装：npm install -g yarn
然后在「packages-vue-example」中创建测试项目文件夹，并且需重新执行git上传流程
 
 
notion image
 
上一篇
React SSR
下一篇
Webpack
评论
Loading...