⚠️本篇笔记大部分基于 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. 开始进行遍历、比较
    1. a和b是一致的,会继续进行比较;c和f因为key不一致,所以就会break跳出循环。
      notion image
  1. 尾部开始进行遍历、比较
    1. notion image
  1. 如果旧节点遍历完毕,但是依然有新的节点,那么就新增节点
    1. notion image
  1. 如果新的节点遍历完毕,但是依然有旧的节点,那么就移除旧节点:
    1. notion image
  1. 最后是最特色的情况,中间还有很多未知的或者乱序的节点:
    1. 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可以实现缓存;计算属性将被混入到组件实例中。所有 gettersetterthis 上下文自动地绑定为组件实例;
 

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 SSRWebpack
Loading...
😈Zabanya
😈Zabanya
一名喜欢瞎折腾选手
公告
 
部分教程类文章篇幅过大,可能会导致加载时间稍微偏长,非常感谢您的耐心等待 ~ 🎉