Vue3学习---【API】【从零开始的Vue3学习!!!】

目录

应用实例API

app.mount()

unmount()

常规API

version

nextTick()

状态选项API

data()

注意:

methods()

生命周期选项

beforeCreate()和Created()

beforeCreate()

created()

beforeCreate()和created()的区别

beforeMount()和mounted()

beforeMount()

mounted()

beforeMount()和mounted()区别

beforeUpdate()和updated()

beforeUpdate()

updated()

beforeUpdate()和updated()的区别

应用实例API

app.mount()

  • 将应用实例挂载到一个容器中

使用**.mount()** 挂载时,应当挂载到一个"容器 "(div、section等)中,而不是某个具体的元素(p、button等)

  • 如果挂载到某个具体元素,而不是容器元素中,则可能会失效
html 复制代码
<body>
	<button id="app" @click="trigger">{{count}}</button>
	<script>
		const app = Vue.createApp({
			data(){
				return {
					count:0
				}
			},
			methods:{
				trigger(){
					this.count++;
				}
			}
		});
		app.mount('#app');
	</script>
</body>

上面将应用挂载到了一个按钮上,这是不允许的,此时点击按钮,并不会触发任何方法,正确方法是将应用挂载到一个"容器 "元素中,再将button 放置到该"容器"元素中

javascript 复制代码
<button id="app">
    <button @click="trigger">{{count}}</button>
</button>

unmount()

  • 卸载一个已挂载的应用实例,卸载一个应用会触发应用内所有组件的卸载

常规API

version

  • 暴露当前所使用的Vue版本
javascript 复制代码
console.log(Vue.version);

nextTick()

  • 强制刷新DOM的方法

Vue 中更改响应式状态时,最终的DOM更新并不是同步生效的,而是由Vue 将它们缓存在一个队列中,直到下一个"tick"才一起更新

**nextTick()**可以在状态改变后立即使用,等待DOM更新完成

html 复制代码
<body>
	<div id="app">
		<button @click="trigger">{{count}}</button>
	</div>
	<script>
		const app = Vue.createApp({
			data(){
				return {
					count:0
				}
			},
			methods:{
				async trigger(){
					this.count++;
					console.log(document.getElementById('app').textContent);
					await Vue.nextTick();
					console.log(document.getElementById('app').textContent);
				}
			}
		});
		app.mount('#app');
		console.log(Vue.version);
	</script>
</body>

效果:

状态选项API

data()

javascript 复制代码
interface ComponentOptions {
  data?(
    this: ComponentPublicInstance,
    vm: ComponentPublicInstance
  ): object
}

该函数会返回一个普通JavaScript对象Vue 会将它转换为响应式对象

实例创建后,可以通过"this.data** "访问该响应式对象,组件实例也代理了该数据对象上所有的属性,因此**this.a** 等价于**this.data.a

  • 所有会用到的顶层数据属性都应该提前在这个对象中声明
  • 尽管可以向this.$data添加新属性,但是不推荐这么做
  • 如果一个属性的值在一开始还获取不到,应当先用undefined 或是null值来占位

注意:

以"_ "或"** "开头的属性将不会被组件实例代理,因为它们可能和**Vue** 的**内置属性** 、**API方法** 冲突,你必须以**this.data._property方式来访问它们

html 复制代码
<body>
	<div id="app">
		{{a}}
	</div>
	<script>
		const app = Vue.createApp({
			data(){
				return {
					a:100
				}
			},
			created(){
				console.log(this.a);	// 100
			}
		});
		app.mount('#app');
	</script>
</body>
  • 但如果为data属性使用了一个箭头函数,则this将不会指向该组件实例,不过仍然可以使用函数的第一个参数来访问实例
javascript 复制代码
data: (vm) => ({ a: vm.myProp })

methods()

Vue 允许我们在应用实例创建时定义方法 ,它的值是一个对象

例如,下面的代码,在点击按钮后,数字会加1

因此,methods常用来添加某个实例需要用的方法

html 复制代码
<body>
	<div id="app">
		<button @click="trigger">{{count}}</button>
	</div>
	<script>
		const app = Vue.createApp({
			data(){
				return {
					count:0
				}
			},
			methods:{
				trigger(){
					this.count++;
				}
			}
		});
		app.mount('#app');
	</script>
</body>

生命周期选项

beforeCreate()和Created()

beforeCreate()

  • 在组件实例初始化完成之后立即调用

beforeCreate() 调用时,data()methods() 还未被载入,此时无法使用data() 中属性和methods中方法

因此,**beforeCreate()**用于组件实例化之前的准备工作

beforeCreate()中访问不到挂载的DOM节点,因为还没有挂载

created()

  • 在组件实例处理完所有与状态相关的选项后调用

created() 中可以调用到data()methods 中的属性方法

因此,**created()**中适合进行数据操作初始化

created()中访问不到挂载的DOM节点,因为还没有挂载

beforeCreate()和created()的区别

html 复制代码
<body>
	<div id="app">{{content}}</div>
	<script>
		const app = Vue.createApp({
			data(){
				return {
					content:"我是一个内容"
				}
			},
			beforeCreate(){
				console.log("beforeCreate:",this.content);
			},
			created(){
				console.log("created:",this.content);
			}
		});
		app.mount('#app');
	</script>
</body>

效果:

beforeMount()和mounted()

beforeMount()

  • 在组件被挂载之前调用

在组件即将被挂载之前调用,此时组件已经实例化完成,所以可以调用到data()、methods(),但不能通过this.$el访问到挂载的dom节点

mounted()

  • 在组件被挂载后调用

在组件挂载时调用,此时组件已经实例化完成,所以可以调用到data()、methods(),可以通过this.$el访问到挂载的dom节点

beforeMount()和mounted()区别

html 复制代码
<body>
	<div id="app">{{content}}</div>
	<script>
		const app = Vue.createApp({
			data(){
				return {
					content:"我是一个内容"
				}
			},
			beforeMount(){
				console.log("beforeMount可以调用data():",this.content);
				console.log("beforeMount不可以访问dom节点",this.$el);
			},
			mounted(){
				console.log("mounted可以调用data():",this.content);
				console.log("mounted可以访问dom节点",this.$el);
			}
		});
		app.mount('#app');
	</script>
</body>

效果:

beforeUpdate()和updated()

beforeUpdate()

  • 在组件即将因为一个响应式状态变更而更新DOM树之前调用

视图层的数据发生改变时调用

updated()

  • 在组件因为一个响应式状态变更而更新其DOM树之后调用

DOM更新完成时调用,应避免在updated中改变数据,否则会造成无限循环

beforeUpdate()和updated()的区别

html 复制代码
<body>
	<div id="app">{{count}}</div>
	<script>
		const app = Vue.createApp({
			data(){
				return {
					count:0
				}
			},
			beforeUpdate(){
				console.log('beforeUpdate:',this.count);
				this.count++;
			},
			updated(){
				console.log('updated:',this.count);
			},
			mounted(){
				this.count = 10;
			}
		});
		app.mount('#app');
	</script>
</body>

效果:

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
Nu11PointerException2 小时前
JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习
笔记·学习
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer085 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
@小博的博客5 小时前
C++初阶学习第十弹——深入讲解vector的迭代器失效
数据结构·c++·学习
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript