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>

效果:

相关推荐
你挚爱的强哥6 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森40 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy40 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891143 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
Red Red1 小时前
网安基础知识|IDS入侵检测系统|IPS入侵防御系统|堡垒机|VPN|EDR|CC防御|云安全-VDC/VPC|安全服务
网络·笔记·学习·安全·web安全
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
Natural_yz3 小时前
大数据学习17之Spark-Core
大数据·学习·spark
qq_172805593 小时前
RUST学习教程-安装教程
开发语言·学习·rust·安装
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket