【vue3学习P5-P10】vue3语法；vue响应式实现
0、vue2和vue3对比
| 框架版本 | API方式 | 双向绑定原理 | dom | Fragments | Tree-Shaking |
|---|---|---|---|---|---|
| vue2 | 选项式API（Options API） | 基于Object.defineProperty（监听）实现，不能双向绑定对象类型的数据【通过Object.defineProperty里面的set和get做对象劫持，在处理数组等对象类型数据时，则是重写原型方法（push、pop等方法可以被监听）】 |
每次更新diff，都是全量对比 | |
import语法引用组件：import xxx from xxx |
| vue3 | 组合式API（Composition API） | 基于Proxy（劫持）实现，能够双向绑定对象类型的数据 |
只对比有标记的，对标记部分进行更新（大大减少静态内容的对比消耗，动态内容是{{}}双向绑定的内容） | |
import语法引用组件时，将全局API分块，不使用的功能不会出现在基础包中，减少打包体积：import {aaa} from xxx |
0.1 vue3新特性：
- 重写双向数据绑定
- VDOM性能瓶颈
- Fragments：增加了Suspense teleport和多v-model用法
- Tree-Shaking的支持：在保持代码运行结果不变的情况下，去除无用的代码
- 组合式API（Composition API）
- setup语法糖
0.2 vue3的三种书写风格
- Options API
- setup
- setup 语法糖
// 第一种书写风格：Options API
<template>
</template>
<script>
export default{
data() {
return{
// 数据
}
},
methods: {}
}
</script>
<style>
</style>
// 第二种书写风格setup
<template>
<div>
{{a}}
</div>
</template>
<script>
setup() {
const a = 1
// 变量需要手动return才能在dom中使用
return{
a
}
}
</script>
<style>
</style>
// 第三种书写风格setup语法糖（后+lang选择使用是js语言）
<template>
<div>
{{a}}
</div>
</template>
<script setup lang="ts">
const a:number = 1
</script>
<style>
</style>
1、vue语法
vue语法：
- 插值语法：{{}}
- 指令语法：v-
1.1 插值语法
<template>
<div>
<p>{{data}}</p>
</div>
</template>
<script setup lang="ts">
const data = {
name: '张三',
age: 30,
like: '吃饭'
}
</script>
<style scoped>
</style>
1.2 vue指令
v-开头的都是vue内置指令
v-text 用来显示文本
v-html 用来展示富文本（支持标签，如xxx，不支持组件，如<组件名>xxx）
v-if 用来控制元素的显示隐藏（切换真假DOM，false时注释掉dom节点）
v-else-if 表示 v-if 的v-else-if 可以链式调用
v-else v-if条件收尾语句
v-show 用来控制元素的显示隐藏（false时将节点设置不可见，display:none block Css切换，性能比v-if高）
v-on 简写@ 用来给元素添加/绑定事件（v-on:click语法糖简写@click）
v-bind 简写:用来绑定元素的属性Attr（v-bind:id语法糖简写:id）
v-model 双向绑定
v-for 用来遍历元素
v-on 修饰符 冒泡案例
v-once 性能优化只渲染一次
v-memo 性能优化会有缓存
1.2.1 点击事件：动态事件类型切换
// 动态事件切换
<template>
// 静态事件
<button @click="clickBtn">按钮点击</button>
// 动态事件（动态事件切换）
<button @[event]="clickBtn">按钮点击</button>
</template>
<script>
// const event = "click" // @[event]等于@click
const event = "doubleClick" // @[event]等于@doubleClick
const clickBtn = ()=>{
console.log("点击按钮了……")
}
</script>
1.2.2 点击事件：阻止点击冒泡
点击冒泡：当父级节点和子级节点都有点击事件时，点击子级节点也会触发父级节点的点击事件
// 动态事件切换
<template>
<div @click="parentClick">
<button @[event].stop="clickBtn">按钮点击</button>
</div>
</template>
<script>
const parentClick = ()=>{
console.log("点击了父级")
}
// const event = "click" // @[event]等于@click
const event = "doubleClick" // @[event]等于@doubleClick
const clickBtn = ()=>{
console.log("点击按钮了……")
}
</script>
| 属性 | 作用 |
|---|---|
| @[event].stop | 阻止点击冒泡（触发父级节点的点击事件），但是：对单击事件有效，对双击事件无效 |
| @[event].prevent | 阻止提交表单 |
| @[event].once | 只触发一次，后面再点击多少次都不会触发 |
| @[event].capture | |
| @[event].middle | |
| @[event].left | |
| @[event].right | |
| @[event].passive | |
| @[event].self |
1.2.3 v-bind 绑定元素属性
绑定id、class、style……
<template>
<div :id="id">
<p :style="style">段落段落段落</p>
<button :class="['a', 'b']" @click.middle="clickBtn()">子1按钮</button>
<button :class="['a']" @[event].passive="clickBtn()">子2按钮</button>
</div>
</template>
<script setup>
// 事件
const event = "click" // @[event]等于@click
const clickBtn = ()=>{
console.log("点击按钮了……")
}
// 属性
const id = "myid"
const style = {
color: 'green',
border: '1px solid green'
}
</script>
<style scoped>
#myid{
background-color: #ccc;
}
.a{
background-color: blue;
}
.b{
color: red;
}
</style>
1.2.4 v-model 绑定表单元素（ref，响应式，双向绑定）
响应式的数据：双向绑定（通过ref和reactive）
v-model can only be used on ,