前情提要：
Vue3开发基础语法(一)：
1.1. methods中的this
1.1.1. 不能使用箭头函数
我们在methods中要使用data返回对象中的数据，那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据。
那么我们这个this能不能是window呢？
我们来看下面的代码：
const App = {
template: "#my-app",
data() {
return {
counter: 0
}
},
methods: {
increment: () => {
// this.counter++;
console.log(this);
},
decrement() {
this.counter--;
}
}
}为什么是window呢？
this到底是如何查找和绑定的呢？
1.1.2. this到底指向什么
事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this：
vue3源码的this绑定过程
1.2. VSCode增加代码片段
我们在前面练习Vue的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速生成。
VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。
具体的步骤如下：
生成代码片段
打开生成代码片段的配置
选择HTML
生成代码片段
模板语法:
React的开发模式：
Vue也支持jsx的开发模式（后续有时间也会讲到）：
所以，对于学习Vue来说，学习模板语法是非常重要的。
2.1. 插值语法
2.1.1. mustache语法
如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值：
<div>{{message}}</div>
并且我们前端提到过，data返回的对象是有添加到Vue的响应式系统中，当data中的数据发生改变时，对应的内容也会发生更新。
当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式：
<body>
<div id="app"></div>
<template id="my-app">
<div>
<!-- mustache基本使用 -->
<h2>{{message}}</h2>
<!-- JavaScript表达式 -->
<h2>{{ counter * 2}}</h2>
<h2>{{message.split(" ").reverse().join(" ")}}</h2>
<!-- 调用一个methods中的函数 -->
<h2>{{reverse(message)}}</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 创建App组件
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
counter: 10,
}
},
methods: {
reverse(msg) {
return msg.split(" ").reverse().join(" ")
}
}
}
// 创建应用程序, 并且挂载
Vue.createApp(App).mount('#app');
</script>
</body>但是下面的代码是错误的：
<!-- 错误的写法 -->
<!-- 这是一个赋值语句, 不是表达式 -->
<h2>{{var name = "Hello"}}</h2>
<!-- 控制流的if语句也是不支持的, 可以使用三元运算符 -->
<h2>{{ if (true) { return message } }}</h2>三元运算符是可以的：
2.1.2. v-once
用于指定元素或者组件只渲染一次：
<h2 v-once>当前计数: {{counter}}</h2>
<button @click="increment">+1</button>如果是子节点，也是只会渲染一次：
<div v-once>
<h2>当前计数: {{counter}}</h2>
<button @click="increment">+1</button>
</div>2.1.3. v-text
用于更新元素的 textContent：
<span v-text="msg"></span>
<!-- 等价于 -->
<span>{{msg}}</span>2.1.4. v-html
默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。
如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示：
<body>
<div id="app"></div>
<template id="my-app">
<div v-html='info'></div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: `<span style='color: red; font-size: 30px'>哈哈哈</span>`
}
}
}
Vue.createApp(App).mount('#app');
</script>
</body>2.1.5. v-pre
v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：
<div v-pre>{{message}}</div>显示效果
2.1.6. v-cloak
这个指令保持在元素上直到关联组件实例结束编译。
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div><div> 不会显示，直到编译结束。
2.2. v-bind
前端讲的一系列指令，主要是和内容相关的，元素除了内容之外还会有各种各样的属性。
绑定属性我们使用v-bind：
2.2.1. 绑定基本属性
前面我们讲的Mustache等语法主要是将内容插入到 innerHTML 中。
很多时候，元素的属性也是动态的：
<div id="app"></div>
<template id="my-app">
<div>{{message}}</div>
<img v-bind:src="src" alt="">
<!-- 语法糖写法 -->
<img :src="src" alt="">
<!-- 注意这两种写法的不同 -->
<img src="src" alt="">
<!-- 绑定a元素 -->
<a :href="href"></a>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
src: "https://avatars.githubusercontent.***/u/10335230?v=4",
href: "http://www.baidu.***"
}
}
}
Vue.createApp(App).mount('#app');
</script>2.2.2. 绑定class属性
对象语法
- 我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class。
<div id="app"></div>
<template id="my-app">
<!-- 1.普通的绑定方式 -->
<div :class="className">{{message}}</div>
<!-- 2.对象绑定 -->
<!-- 动态切换class是否加入: {类(变量): boolean(true/false)} -->
<div class="why" :class="{nba: true, 'james': true}"></div>
<!-- 案例练习 -->
<div :class="{'active': isActive}">哈哈哈</div>
<button @click="toggle">切换</button>
<!-- 绑定对象 -->
<div :class="classObj">哈哈哈</div>
<!-- 从methods中获取 -->
<div :class="getClassObj()">呵呵呵</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
className: "why",
nba: 'kobe',
isActive: false,
classObj: {
why: true,
kobe: true,
james: false
}
}
},
methods: {
toggle() {
this.isActive = !this.isActive;
},
getClassObj() {
return {
why: true,
kobe: true,
james: false
}
}
}
}
Vue.createApp(App).mount('#app');
</script>数组语法：
- 我们可以把一个数组传给 :class，以应用一个 class 列表；
<div id="app"></div>
<template id="my-app">
<div :class="['why', nba]">哈哈哈</div>
<div :class="['why', nba, isActive? 'active': '']">呵呵呵</div>
<div :class="['why', nba, {'actvie': isActive}]">嘻嘻嘻</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
nba: 'kobe',
isActive: true
}
}
}
Vue.createApp(App).mount('#app');
</script>2.2.3. 绑定style属性
对象语法：
- :style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。
- CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
<div id="app"></div>
<template id="my-app">
<div :style="{color: 'red', fontSize: '30px', 'background-color': 'blue'}">{{message}}</div>
<div :style="{color: 'red', fontSize: size+'px', 'background-color': 'blue'}">{{message}}</div>
<div :style="styleObj">{{message}}</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
size: 50,
styleObj: {
color: 'red',
fontSize: '50px',
'background-color': 'blue'
}
}
}
}
Vue.createApp(App).mount('#app');
</script>
数组语法：
- :style 的数组语法可以将多个样式对象应用到同一个元素上；
<div id="app"></div>
<template id="my-app">
<div :style="[styleObj1, styleObj2]">{{message}}</div>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World",
size: 50,
styleObj1: {
color: 'red',
fontSize: '50px',
'background-color': 'blue'
},
styleObj2: {
textDecoration: 'underline',
fontWeight: 700
}
}
}
}
Vue.createApp(App).mount('#app');
</script>
2.2.4. 动态绑定属性
属性的名称和值都是动态的
<template id="my-app">
<!-- 属性的名称是动态的 -->
<div :[name]="value">{{message}}</div>
</template>2.2.5. 绑定一个对象
info对象会被拆解成div的各个属性；
<template id="my-app">
<div v-bind="info">{{message}}</div>
</template>2.3. v-on
前面我们绑定了元素的内容和属性，在前端开发中另外一个非常重要的特性就是交互。
在前端开发中，我们需要经常和用户进行各种各样的交互：
- 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
- 在Vue中如何监听事件呢？使用v-on指令
v-on的使用：
- 缩写：@
- 预期：Function | Inline Statement | Object
- 参数：event
- 修饰符：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
- .once - 只触发一次回调。
- .left - 只当点击鼠标左键时触发。
- .right - 只当点击鼠标右键时触发。
- .middle - 只当点击鼠标中键时触发。
- .passive - { passive: true } 模式添加侦听器
- 用法：绑定事件监听
案例演练：
<div id="app"></div>
<template id="my-app">
<div>{{message}}</div>
<!-- 基本使用 -->
<!-- 1.绑定函数 -->
<button v-on:click="btnClick">按钮1</button>
<button @click="btnClick">按钮2</button>
<div v-on:mousemove="mouseMove">div的区域</div>
<!-- 2.绑定对象 -->
<button v-on="{click: btnClick, mousemove: mouseMove}">特殊按钮3</button>
<!-- 3.内联语句 -->
<!-- 默认会把event对象传入 -->
<button @click="btn4Click">按钮4</button>
<!-- 内联语句传入其他属性 -->
<button @click="btn4Click($event, 'why')">按钮5</button>
<!-- 4.修饰符 -->
<div @click="divClick">
<button @click.stop="btnClick">按钮6</button>
</div>
<input type="text" @keyup.enter="onEnter">
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World"
}
},
methods: {
btnClick() {
console.log("按钮被点击了");
},
btn4Click(event) {
console.log(event);
},
btn4Click(event, message) {
console.log(event, message);
},
mouseMove() {
console.log("鼠标移动");
},
divClick() {
console.log("divClick");
},
onEnter(event) {
console.log(event.target.value);
}
}
}
Vue.createApp(App).mount('#app');
</script>
2.4. 条件渲染
在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。
Vue提供了下面的指令来进行条件判断：
- v-if
- v-else
- v-else-if
- v-show
下面我们来对它们进行学习。
2.4.1. v-if、v-else、v-else-if
v-if、v-else、v-else-if用于根据条件来渲染某一块的内容：
- 这些内容只有在条件为true时，才会被渲染出来；
- 这三个指令与JavaScript的条件语句if、else、else if类似；
<!-- vue3中, template不再要求必须只有一个根元素 -->
<template id="my-app">
<input type="text" v-model.number="score">
<h2 v-if="score > 90">优秀</h2>
<h2 v-else-if="score > 80">良好</h2>
<h2 v-else-if="score > 60">普通</h2>
<h2 v-else>不及格</h2>
</template>v-if的渲染原理：
- v-if是惰性的；
- 当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉；
- 当条件为true时，才会真正渲染条件块中的内容；
2.4.2. template元素
因为v-if是一个指令，所以必须将其添加到一个元素上：
- 但是如果我们希望切换的是多个元素呢？
- 此时我们渲染div，但是我们并不希望div这种元素被渲染；
- 这个时候，我们可以选择使用template；
template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来：
- 有点类似于小程序中的block
<template id="my-app">
<template v-if="showHa">
<h2>哈哈哈哈</h2>
<h2>哈哈哈哈</h2>
<h2>哈哈哈哈</h2>
</template>
<template v-else>
<h2>呵呵呵呵</h2>
<h2>呵呵呵呵</h2>
<h2>呵呵呵呵</h2>
</template>
<button @click="toggle">切换</button>
</template>2.4.3. v-show
v-show和v-if的用法看起来是一致的：
<template id="my-app">
<h2 v-show="isShow">哈哈哈哈</h2>
</template>2.4.4. v-show和v-if区别
首先，在用法上的区别：
- v-show是不支持template；
- v-show不可以和v-else一起使用；
其次，本质的区别：
- v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有渲染的，只是通过CSS的display属性来进行切换；
- v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；
开发中如何进行选择呢？
- 如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show；
- 如果不会频繁的发生切换，那么使用v-if；
2.5. 列表渲染
在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染。
- 这个时候我们可以使用v-for来完成；
- v-for类似于JavaScript的for循环，可以用于遍历一组数据；
2.5.1. v-for基本使用
v-for的基本格式是 "item in 数组"：
- 数组通常是来自data或者prop，也可以是其他方式；
- item是我们给每项元素起的一个别名，这个别名可以自定来定义；
<template id="my-app">
<h2>电影列表</h2>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</template>我们知道，在遍历一个数组的时候会经常需要拿到数组的索引：
- 如果我们需要索引，可以使用格式："(item, index) in 数组"；
- 注意上面的顺序：数组元素项item是在前面的，索引项index是在后面的；
<template id="my-app">
<h2>电影列表</h2>
<ul>
<li v-for="(item, index) in movies">{{index}}-{{item}}</li>
</ul>
</template>2.5.2. v-for支持类型
v-for也支持遍历对象，并且支持有一二三个参数：
- 一个参数："value in object";
- 二个参数："(value, key) in object";
- 三个参数："(value, key, index) in object";
<template id="my-app">
<h2>遍历对象</h2>
<ul>
<li v-for="(value, key, index) in info">
{{index}} - {{key}} - {{value}}
</li>
</ul>
</template>2.5.3. template元素
类似于v-if，你可以使用 template 元素来循环渲染一段包含多个元素的内容：
- 我们使用template来对多个元素进行包裹，而不是使用div来完成；
<div id="app"></div>
<template id="my-app">
<ul>
<template v-for="(value, key) in info">
<li>{{key}}</li>
<li>{{value}}</li>
<hr>
</template>
</ul>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: {
name: 'why',
age: 18,
height: 1.88
}
}
}
}
Vue.createApp(App).mount('#app');
</script>
2.5.4. 数组更新检测
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
替换数组的方法
上面的方法会直接修改原来的数组，但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()。
const nums = [10, 21, 34, 6];
const newNums = nums.filter(num => num % 2 === 0);
console.log(newNums);2.6. key和diff算法
2.6.1. 认识VNode和VDOM
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。
这个key属性有什么作用呢？我们先来看一下官方的解释：
- key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；
- 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
- 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；
官方的解释对于初学者来说并不好理解，比如下面的问题：
- 什么是新旧nodes，什么是VNode？
- 没有key的时候，如何尝试修改和复用的？
- 有key的时候，如何基于key重新排列的？
我们先来解释一下VNode的概念：
- 因为目前我们还没有比较完整的学习组件的概念，所以目前我们先理解HTML元素创建出来的VNode；
- VNode的全称是Virtual Node，也就是虚拟节点；
- 事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode；
- VNode的本质是一个JavaScript的对象；
<div class="title" style="font-size: 30px; color: red;">哈哈哈</div>在我们的Vue中会被转化创建出一个VNode对象：
const vnode = {
type: 'div',
props: {
'class': 'title',
style: {
'font-size': '30px',
color: 'red'
}
},
children: '哈哈哈'
}
Vue内部在拿到vnode对象后，会对vnode进行处理，渲染成真实的DOM。
- 这一部分我会在后面专门和大家阅读createApp函数中讲到；
DOM渲染过程
如果我们不只是一个简单的div，而是有一大堆的元素，那么它们应该会形成一个VNode Tree：
<div>
<p>
<i>哈哈哈哈</i>
<i>哈哈哈哈</i>
</p>
<span>嘻嘻嘻嘻</span>
<strong>呵呵呵呵</strong>
</div>这个和我们的key有什么关系呢？
- 接下来我们就进行具体的分析；
2.6.2. key作用和diff算法
我们先来看一个例子：
- 这个例子是当我点击按钮时会在中间插入一个f；
<div id="app"></div>
<template id="my-app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="insertF">insert f</button>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
letters: ['a', 'b', 'c', 'd']
}
},
methods: {
insertF() {
//splice(插入位置，是否删除，'插入元素')
this.letters.splice(2, 0, 'f')
}
}
}
Vue.createApp(App).mount('#app');
</script>
我们可以确定的是，这次更新对于ul和button是不需要进行更新，需要更新的是我们li的列表：
- 在Vue中，对于相同父元素的子元素节点并不会重新渲染整个列表；
- 因为对于列表中 a、b、c、d它们都是没有变化的；
- 在操作真实DOM的时候，我们只需要在中间插入一个f的li即可；
那么Vue中对于列表的更新究竟是如何操作的呢？
- Vue事实上会对于有key和没有key会调用两个不同的方法；
- 有key，那么就使用 patchKeyedChildren方法；
- 没有key，那么就使用 patchUnkeyedChildren方法；
有key和没有key的操作
2.6.3. 没有key执行操作
没有key对应的源代码如下：
patchUnkeyedChildren
它的过程画图就是如下的操作：
patchUnkeyedChildren画图
我们会发现上面的diff算法效率并不高：
- c和d来说它们事实上并不需要有任何的改动；
- 但是因为我们的c被f所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增；
2.6.4. 有key执行操作
如果有key，那么会执行什么样的操作呢？
patchKeyedChildren
第一步的操作是从头开始进行遍历、比较：
- a和b是一致的会继续进行比较；
- c和f因为key不一致，所以就会break跳出循环；
第一步对比的过程
第二步的操作是从尾部开始进行遍历、比较：
第二步对比过程
第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点：
新增节点
第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点：
移除旧节点
第五步是最特色的情况，中间还有很多未知的或者乱序的节点：
未知序列操作
所以我们可以发现，Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：
- 在没有key的时候我们的效率是非常低效的；
- 在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；
