Vue3学习---【API】【从零开始的Vue3学习！！！】_onmounted(() => { getnowtime() })-优快云博客

本文链接：https://blog.youkuaiyun.com/zheshiyangyang/article/details/142451009

应用实例API

app.mount()

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

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

如果挂载到某个具体元素，而不是容器元素中，则可能会失效：

<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放置到该“容器”元素中

<button id="app">
    <button @click="trigger">{{count}}</button>
</button>

unmount()

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

常规API

version

暴露当前所使用的Vue版本

console.log(Vue.version);

nextTick()

强制刷新DOM的方法

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

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

<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()

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方式来访问它们

<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将不会指向该组件实例，不过仍然可以使用函数的第一个参数来访问实例

data: (vm) => ({ a: vm.myProp })

methods()

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

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

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

<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()的区别

<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()区别

<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()的区别

<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>

效果：