【vue3学习P5-P10】vue3语法；vue响应式实现

哈！小白要成长！

已于 2024-02-13 20:01:21 修改

阅读量1.7k

点赞数 20

CC 4.0 BY-SA版权

分类专栏：学习-vue3 文章标签： vue.js 学习前端

于 2024-02-04 13:49:23 首次发布

本文链接：https://blog.csdn.net/qq_41956139/article/details/135852161

0、vue2和vue3对比

框架版本	API方式	双向绑定原理	dom	Fragments	Tree-Shaking
vue2	选项式API（Options API）	基于`Object.defineProperty`（监听）实现，不能双向绑定对象类型的数据【通过Object.defineProperty里面的set和get做对象劫持，在处理数组等对象类型数据时，则是重写原型方法（push、pop等方法可以被监听）】	每次更新diff，都是全量对比	`<template>`标签里面只能有一个根节点`<div>`标签	import语法引用组件：import xxx from xxx
vue3	组合式API（Composition API）	基于`Proxy`（劫持）实现，能够双向绑定对象类型的数据	只对比有标记的，对标记部分进行更新（大大减少静态内容的对比消耗，动态内容是{ {}}双向绑定的内容）	`<template>`标签里面支持多个根节点`<div>`标签（实现原理：通过虚拟节点实现）	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 用来展示富文本（支持标签，如<span>xxx</span>，不支持组件，如<组件名>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 <input>, <textarea> and <select> elements.

<template>
	<div>
		<input v-model="data" type="text"/>
		<p>{
   
   {
   
   data}}</p>
	</div>
</template>

<script setup>
import {
   
   ref} from 'vue'

// 双向绑定（通过ref和reactive）
const data = ref('测试内容'