Vue 学习总结笔记 (八)

最新推荐文章于 2023-12-07 10:23:09 发布
最新推荐文章于 2023-12-07 10:23:09 发布
阅读量2.6k 收藏 26
点赞数 5
分类专栏： JavaScript 文章标签： vue.js javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_Holmes/article/details/123383188
版权

文章目录

1. 消息订阅与发布

1.1 消息订阅与发布的流程

消息订阅与发布，两个过程：

  • 第一步：订阅消息：消息名。
  • 第二步：发布消息：消息内容。

在这里插入图片描述

1.2 pubsub-js库

pubsub-js的名字就对应了publish(发布)，subscribe(订阅)两个英文单词。

想要实现消息订阅与发布就必须导入外库，实现消息订阅发布的库有很多，这里就是用pubsub-js库。

npm i pubsub-js命令安装
在这里插入图片描述

pubsub-js库的使用：

app.vue文件：

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import School from "./components/School.vue"
	import Student from "./components/Student.vue"
	export default{
		name:'App',
		components:{Student,School},
		data(){
			return {
				msg:"你好啊！",
				studentName:""
			}
		},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

School.vue文件：

<template>
	<div class="school">
		<h2>学校姓名: {{name}}</h2>
		<h2>学校地址: {{address}}</h2>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default{
		name:"School",
		data(){
			return {
				name:"清华大学",
				address:"北京"
			}
		},
		mounted(){
			//使用pubsub订阅一个消息
			this.pubId = pubsub.subscribe('hello',function(messageName,data){
				console.log("有人发布了hello消息，hello消息的回调执行了。")
				console.log('订阅的名字：',messageName)
				console.log('拿到value数值：',data)
				//这里的this是undefined，想要拿到vc组件对象，就可以使用箭头函数来操作。
				console.log(this)
			})
		},
		beforeDestroy(){
			//组件销毁，取消订阅。
			//这里需要拿到订阅的变量名。我们可以通过this来拿到。
			pubsub.unsubscribe(this.pubId)
		}
	}
</script>

<style>
	.school{
		background-color: skyblue;
	}
</style>

Student.vue文件：

<template>
	<div class="student">
		<h2>学生姓名: {{name}}</h2>
		<h2>学生性别: {{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default{
		name:"Student",
		data(){
			return {
				name:"张三",
				sex:"男"
			}
		},
		methods:{
			sendStudentName(){
				pubsub.publish('hello',666)
			}
		}
	}
</script>

<style>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

像上面的subscribe的messageName可以用_来替代：
在这里插入图片描述

总结：
在这里插入图片描述

2. $nextTick用法

可以使用Vue的nextTick()来操作。

$nextTick函数所指定的函数会在模板dom元素刷新完成后进行回调。

所以一般$nextTick的回调函数放置的是dom元素之后要执行的命令属性，例如：focus获取焦点。

在这里插入图片描述

在这里插入图片描述

3. todoList 案例添加一个编译按钮

需要修改的就只有App.vue和MyItem.vue的内容：

App.vue文件：

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<Header1 @receive="receive"></Header1>
				<List1 :todoList="todoList" ></List1>
				<Footer1 :todoList="todoList" @checkAllTodoObj="checkAllTodoObj" @clearAllTodoObj="clearAllTodoObj"></Footer1>
			</div>
		</div>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	import Header1 from "./components/MyHeader.vue"
	import Footer1 from "./components/MyFooter.vue"
	import List1 from "./components/MyList.vue"
	
	export default{
		name:'App',
		components:{
			Header1,
			List1,
			Footer1,
		},
		data(){
			return {
				//获取当前页面已经存储的localStorage数据。
				//如果localStorage.getItem('todoList')没有数据返回就返回了null，并且JSON解析出来也是null，这样就报错了！
				//所以我们要加一个||或，前面赋值报错就只用后面的[]空数组。
				todoList:JSON.parse(localStorage.getItem('todoList')) || []
			}
		},
		methods:{
			//从MyHeader中获取数据，添加todoObj对象
			receive(todoObj){
				//这样将值传给添加到todoList末尾中。
				this.todoList.unshift(todoObj);
			},
			//勾选或者取消勾选一个todo
			checkTodoObj(id){
				this.todoList.forEach((todoObj)=>{
					if(todoObj.id == id)
						todoObj.done = !todoObj.done
				})
			},
			//删除一个TodoObj
			deleteTodoObj(_,id){
				//注意：过滤出来的是一个新数组，并不是改变了data中的todoList。
				//因此，要重新赋值一下。
				// console.log(id)
				this.todoList = this.todoList.filter((todoObj)=>{
					return todoObj.id !== id
				})
			},
			//全选or取消全选
			checkAllTodoObj(done){
				this.todoList.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todoObj
			clearAllTodoObj(){
				this.todoList = this.todoList.filter((todo)=>{
					return !todo.done
				})
			},
			updateTodoObj(id,title){
				this.todoList.forEach((todoObj)=>{
					if(todoObj.id == id)
						todoObj.title = title
				})
			},
			
		}
		,
		//实现本地存储
		watch:{
			todoList:{
				//开启深度监视，确保对象中的内容被修改了也能重新定义localStorage中的todoList。
				deep:true,
				handler(newValue,oldValue){
					localStorage.setItem('todoList',JSON.stringify(newValue));
				}
			}
		},
		mounted(){
			this.$bus.$on('checkTodoObj',this.checkTodoObj)
			this.pubId = pubsub.subscribe('deleteTodoObj',this.deleteTodoObj)
			this.$bus.$on('updateTodeObj',this.updateTodoObj)
		},
		beforeDestroy(){
			this.$bus.$off('checkTodoObj')
			this.$bus.$off('updateTodeObj')
			pubsub.unsubscribe(this.pubId)
		}
	}
</script>

<style>
	body{
		background-color: #fff;
	}
	.btn{
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
		border-radius: 4px;
	}
	.btn-edit{
		color: #fff;
		background-color: skyblue;
		border: 1px solid wheat;
		margin-right: 10px;
	}
	
	.btn-danger{
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-danger:hover{
		color: #fff;
		background-color: #BD362F;
	}
	.btn:focus{
		outline: none;
	}
	.todo-container{
		width:600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>

MyItem.vue文件：

<template>
	<li>
		<label>
			<!-- 
				checked勾选该checkbox。
				想要下面的props元素控制checkbox，就可以使用:来使其成为js表达式。这样我们就可以通过js表达式
				来操作了。这里的itemPro我定义为了{id:'001',title:'吃饭',done:true}的结构。
				
				@click和@change都可以操作事件方面的东西。
			-->
			<input type="checkbox" :checked="itemPro.done" @click="handleCheck(itemPro.id)"/>
			<span v-show="!itemPro.isEdit">{{itemPro.title}}</span>
			<input 
				v-show="itemPro.isEdit" 
				type="text" 
				:value="itemPro.title" 
				@blur="handleBlur(itemPro,$event)"
				ref="inputTitle"/>
		</label>
		<button class="btn btn-danger" @click="handleDelete(itemPro.id)">删除</button>
		<button v-show="!itemPro.isEdit" class="btn btn-edit" @click="handlerEdit(itemPro)">编辑</button>
	</li>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
	name:"MyItem",
	//声明接受todo对象
	props:['itemPro'],
	mounted(){
		// console.log(this.itemPro);
	},
	methods:{
		//勾选or取消
		handleCheck(id){
			//通知App组件将对应的itemPro对象的done值取反
			this.$bus.$emit('checkTodoObj',id)
		},
		//删除
		handleDelete(id){
			//根据用户
			if(confirm('确定删除吗？')){
				// this.$bus.$emit("deleteTodoObj",id)
				pubsub.publish('deleteTodoObj',id)
			}
		},
		handlerEdit(itemPro){
			//先判断itemPro中是否有$set函数
			if(!itemPro.hasOwnProperty('isEdit')){
				//使用$set函数来给itemPro对象添加isEdit属性，这样就会触发vue的响应式获取get和set方法。
				this.$set(itemPro,'isEdit',true)
				// console.log("没有isEdit，创建一个")
			}else{
				itemPro.isEdit = true
				// console.log("有isEdit,直接设置为true")
			}
			
			//单纯的走focus是不可以的，因为页面会重新刷新响应的！
			// this.$refs.inputTitle.focus() //因此使用focus()的函数在vue中是不可以的。
			
			//可以使用Vue的nextTick()来操作
			//$nextTick函数所指定的函数会在模板dom元素刷新完成后进行回调。
			this.$nextTick(function(){
				this.$refs.inputTitle.focus()
			})
			
		},
		//失去焦点回调
		handleBlur(itemPro,e){
			itemPro.isEdit = false
			if(!e.target.value.trim())
				return alert('输入不能为空！')
			this.$bus.$emit('updateTodeObj',itemPro.id,e.target.value)
			console.log(e.target.value)
		},
	}
}
</script>

<style scoped>
	li{
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}
	li label {
		float: left;
		cursor: pointer;
	}
	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}
	li button{
		float: right;
		display: none;
		margin-top: 3px;
	}
	li:before{
		content: initial;
	}
	li:last-child{
		border-bottom: none;
	}
	li:hover{
		background-color: #ddd;
	}
	li:hover button{
		display: block;
	}
</style>

4. Vue的 过度与动画

4.1 CSS3的@keyframes 和 Vue的transition标签

style样式用到了css3中的@keyframes关键帧。

vue中，需要进行过度和动画效果的内容。必须放到transition标签中。

这里的transition标签值专门用来给vue使用的，负责过度和动画效果。

test.vue文件：

<template>
	<div>
		<button @click="isShow=!isShow">显示/隐藏</button>
		<!-- 
			使用:appear="true"属性来让它页面加载时就可以加载动画。
				这里可以简写为appear就行。
		-->
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data(){
			return{
				isShow:true
			}
		},
	}
</script>

<style scoped="scoped">
	
	h1{
		background-color: orange;
	}
	
	/* 
		vue规定的名字：
			进入的时候实现v-enter-active的动画效果。(就是显示到页面的时候执行该动画效果)
			离开的时候实现v-leave-active的动画效果。(不显示到页面的时候执行该动画效果)
		注意：
			如果给transition标签赋予了name属性值为hello，那么对应样式的v也要变成hello。
			hello-enter-active
			hello-leave-active
	 */
	.hello-enter-active{
		animation: itholmes 1s linear;
	}
	.hello-leave-active{
		animation: itholmes 1s linear reverse;
	}
	
	/* 
		@keyframes:
			关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）
			的样式来控制CSS动画序列中的中间步骤。
	*/
	@keyframes itholmes{
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
	
</style>

4.2 Vue中的 .hello-enter-active ， .hello-leave-active ， .hello-enter ， .hello-leave-to ， .hello-enter-to ， .hello-leave的用法

<template>
	<div>
		<button @click="isShow=!isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data(){
			return{
				isShow:true
			}
		},
	}
</script>

<style scoped="scoped">
	
	h1{
		background-color: orange;
		/* 
			这里的属性transition就是过度。
			一般我们写在.hello-enter-active , .hello-leave-active中。
		 */
		/* transition: 1s linear; */
	}
	
	/* 
	进入的起点 
	.hello-enter{
		transform:translateX(-100%);
	}
	进入的终点 
	.hello-enter-to{
		transform: translateX(0);
	}
	*/
	/* 
	离开的起点 
	.hello-leave{
		transform:translateX(0);
	}
	离开的终点 
	.hello-leave-to{
		transform: translateX(-100%);
	}*/
	
	/* 
		.hello-enter-active: 是整个进入的过程。
		.hello-leave-active：是整个离开的过程。
	*/
	.hello-enter-active , .hello-leave-active{
		transition: 1s linear;
	}
	
	/* 上面就可以整合为 */
	/* 进入的起点，离开的终点 */
	.hello-enter,.hello-leave-to{
		transform:translateX(-100%);
	}
	/* 进入的终点，离开的起点*/
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}
	
</style>

4.3 多个元素过度(transition-group标签)

在这里插入图片描述

transition-group标签：里面可以存放多个元素标签。

  • 注意：每一个元素标签必须要设置key属性和属性值。
    在这里插入图片描述

test.vue案例：

<template>
	<div>
		<button @click="isShow=!isShow">显示/隐藏</button>
		<transition-group name="hello" appear>
			<h1 v-show="isShow" key="1">你好啊！</h1>
			<h1 v-show="!isShow" key="2">hello,world！</h1>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data(){
			return{
				isShow:true
			}
		},
	}
</script>

<style scoped="scoped">
	
	h1{
		background-color: orange;
		/* 
			这里的属性transition就是过度。
			一般我们写在.hello-enter-active , .hello-leave-active中。
		 */
		/* transition: 1s linear; */
	}
	
	/* 
	进入的起点 
	.hello-enter{
		transform:translateX(-100%);
	}
	进入的终点 
	.hello-enter-to{
		transform: translateX(0);
	}
	*/
	/* 
	离开的起点 
	.hello-leave{
		transform:translateX(0);
	}
	离开的终点 
	.hello-leave-to{
		transform: translateX(-100%);
	}*/
	
	/* 
		.hello-enter-active: 是整个进入的过程。
		.hello-leave-active：是整个离开的过程。
	*/
	.hello-enter-active , .hello-leave-active{
		transition: 1s linear;
	}
	
	/* 上面就可以整合为 */
	/* 进入的起点，离开的终点 */
	.hello-enter,.hello-leave-to{
		transform:translateX(-100%);
	}
	/* 进入的终点，离开的起点*/
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}
	
</style>

4.4 Vue 集成第三方动画

第三方npm.js网站

搜索animate.css这个就是常用的第三方动画。

在这里插入图片描述

在这里插入图片描述

安装后，导入css包。直接使用就可以，它很多的动画都在HostPage上面右侧栏目都有！
在这里插入图片描述

test3.vue使用效果：

<template>
	<div>
		<button @click="isShow=!isShow">显示/隐藏</button>
		<!-- 
			name="animate__animated animate__bounce"是固定的！
			enter-active-class是调用animate.css中的动画，是进入时。
			leave-active-class也是调用animate.css中的动画，是离开时。
		-->
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutDown"
		>
			<h1 v-show="isShow" key="1">你好啊！</h1>
			<h1 v-show="!isShow" key="2">hello,world！</h1>
		</transition-group>
	</div>
</template>

<script>
	//这是一个样式，我们不需要form什么什么东西。
	import 'animate.css'
	export default {
		name:'Test',
		data(){
			return{
				isShow:true
			}
		},
	}
</script>

<style scoped="scoped">
	h1{
		background-color: orange;
	}
</style>

4.5 过度和动画总结

在CSS中的过度和动画解释：

  • 过度就是在那个时间段内，做什么事情。
  • 动画就是一个效果，我们经常是在这个过度时间内，进行这个动画效果。二者是相互依存的关系。

在这里插入图片描述

在Vue中的过度与动画操作：

  • 过度：通过transition或者transition-group标签。它有两种方式：一种是通过name(没有声明，在style中声明v)在style中声明；一种是直接在特定的属性上面指定。
  • 动画：我们可以自定义动画，提供给过度使用；但是一般有第三方库animate.css，我们可以通过第三方库来操作这些东西，很方便。
    在这里插入图片描述

4.6 修改todoList的MyItem组件，添加过度和动画效果

<template>
	<transition name="todo" appear>
		<li>
			<label>
				<input type="checkbox" :checked="itemPro.done" @click="handleCheck(itemPro.id)"/>
				<span v-show="!itemPro.isEdit">{{itemPro.title}}</span>
				<input 
					v-show="itemPro.isEdit" 
					type="text" 
					:value="itemPro.title" 
					@blur="handleBlur(itemPro,$event)"
					ref="inputTitle"/>
			</label>
			<button class="btn btn-danger" @click="handleDelete(itemPro.id)">删除</button>
			<button v-show="!itemPro.isEdit" class="btn btn-edit" @click="handlerEdit(itemPro)">编辑</button>
		</li>
	</transition>
</template>

<script>
import 'animate.css'
import pubsub from 'pubsub-js'
export default {
	name:"MyItem",
	props:['itemPro'],
	methods:{
		handleCheck(id){
			this.$bus.$emit('checkTodoObj',id)
		},
		handleDelete(id){
			if(confirm('确定删除吗？')){
				// this.$bus.$emit("deleteTodoObj",id)
				pubsub.publish('deleteTodoObj',id)
			}
		},
		handlerEdit(itemPro){
			if(!itemPro.hasOwnProperty('isEdit')){
				this.$set(itemPro,'isEdit',true)
			}else{
				itemPro.isEdit = true
			}
			this.$nextTick(function(){
				this.$refs.inputTitle.focus()
			})
			
		},
		handleBlur(itemPro,e){
			itemPro.isEdit = false
			if(!e.target.value.trim())
				return alert('输入不能为空！')
			this.$bus.$emit('updateTodeObj',itemPro.id,e.target.value)
			console.log(e.target.value)
		},
	}
}
</script>

<style scoped>
	
	@keyframes itholmes{
		from{
			transform: translateX(100%);
		}
		to{
			transform: translateX(0px);
		}
	}
	
	.todo-enter-active{
		animation: itholmes 0.5s linear;
	}
	
	.todo-leave-active{
		animation: itholmes 0.5s linear reverse;
	}
	
	li{
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}
	li label {
		float: left;
		cursor: pointer;
	}
	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}
	li button{
		float: right;
		display: none;
		margin-top: 3px;
	}
	li:before{
		content: initial;
	}
	li:last-child{
		border-bottom: none;
	}
	li:hover{
		background-color: #ddd;
	}
	li:hover button{
		display: block;
	}
</style>
xupengboo
关注
  • 5
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue3 学习笔记
weixin_52253964的博客
10-29 898
Vue3 学习笔记
Vue3 学习笔记 ——
m0_69940800的博客
05-04 222
*/ export default { name: ‘App’, setup() { const counter = ref(1000) // console.log(counter.value) const increment = () => { counter.value += 1; } const decrement = () => { counter.value -= 1; } // 必须 return，外部才能拿到值 return { counter, increment,decrem
Vue (Vue3) 入门 （学习笔记）
Jack @ CSDN
12-08 1万+
有过一点点 Vue2 的经验，准备系统学习一下 Vue，以最新的 Vue3 为准，记录一下 Vue 的学习笔记，也希望对其他人有帮助。 文章目录安装、使用当做一个类库（library）使用当做框架使用安装 vue3运行、发布Vue 实战福利: Vue - Cheat Sheet 安装、使用 使用 Vue 一般有 2 中方式，一种是把它当做一个类库（library）使用，一种是当做框架使用，整个项目可以称作为 Vue 项目。 当做一个类库（library）使用 <script src="https://
Vue3学习笔记
mmqgirlfriend的博客
02-07 448
Vue3学习笔记 之前一直没有很系统性的去看过vue3的相关知识，刚好在入职后一个多月的时间，遇到了第一个春节假期，因此在这个期间看了vue3的相关知识。不然项目做起来太难受… Vue3创建项目的两种方式 脚手架 通过vite安装 什么是vite？ —新一代的前端构建工具（类似于webpack） 优势：无需打包，快速启动 初始化工程 attention: Vue3组建中的模板结构可以没有根标签 常用组合式api setup函数 Vue3中一个新的配置项，值为一个函数 组件中用到的数据、方法等，
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
Vue 学习总结笔记 (一)
m0_67401153的博客
03-09 303
文章目录 1. Vue 的介绍 1.1 什么是Vue？ 1.2 Vue的诞生 和 特点 1.3 Vue 的引入 和 Vue devtools开发者工具 1.4 Vue 引入后浏览器端的信息处理 1.5 Vue.config 配置全局 2. MVC和MVVC的基本流程 3. Vue 的使用详解 3.1 Vue 的mvvm架构 3.2 Vue 的注意事项 (重要) 3.2.1 Vue实例对象和容器是一一对应的关系 3.2.2 开发中只有一个Vue实例 3.2.3 Vue中 {{ xxx }}
vue3自己的学习笔记
01-25
vue3自己的学习笔记
vue3 学习笔记
XiaoPengPengs的博客
03-07 380
模板指令 同一个组件上可以使用多个v-model绑定 移除了2.0的syn修饰符 <!-- vue2.0 的写法 --> <ChildComponent :title.sync="pageTitle" /> <!-- vue3.0 的写法 --> <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" /> <template v-for>
Vue3 学习教程 学习笔记
少年感
02-28 462
vue3 学习教程，学习笔记 文章目录 前言 环境搭建 setup ref reactive 计算属性与监视 生命周期 toRefs ref shallowReactive 与 shallowRef readonly 与 shallowReadonly toRaw 与 markRaw toRef与ref customRef provide 与 inject 响应式数据的判断
学习Vue3.0笔记
niepan990810的博客
03-28 2315
Vue3快速上手Vue3简介Vue3相对于Vue2多了些什么？1.性能的提升2.源码改变3.拥抱TS4.新特性（重点）快速上手Vue3工程创建标题 Vue3简介 代号：One Piece(海贼王) Vue3相对于Vue2多了些什么？ 1.性能的提升 根据官方文档描述，Vue3性能的提升提升主要包括以下几个方面： 打包大小减少了41%。 初次渲染55%，更新渲染快了133%。 内存减少54%。 2.源码改变 响应式的实现。之前我们知道Vue2的响应式是通过Object.definePropetry()
vue3学习笔记
最新发布
hdy119yaner的博客
12-07 1009
vue3
Vue3入门笔记
AmourZJ1314的博客
02-24 448
Vue3入门，看完这篇就够了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xupengboo

你的鼓励将是我创作最大的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值