目录
应用实例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等)
- 如果挂载到某个具体元素，而不是容器元素中，则可能会失效：
<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>效果：
