一、组件导入问题
使用vue-cli搭建的vue项目中,组件A需要用到组件B一般会这样写
...
import B from './B.vue' //1
export default {
components: {
B //2
}
}
在B组件中有这样的定义:
export default {
name: "B" // 3
}
有一天写项目写着写着就晕了,我在想 1,2,3处的名字需要保持一致吗?
经过我的测试后发现,1与2处的名称需要一至,我修改了一下官方的例子
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<hello msg="Welcome to Your Vue.js App"/> //HelloWorld 修改成了 hello
</div>
</template>
<script>
import hello from './components/HelloWorld.vue' //HelloWorld 修改成了 hello
export default {
name: 'App',
components: {
hello //HelloWorld 修改成了 hello
}
}
3处的名字可以不与1和2保持一至,但是使用vuetools的时候组件树的名称会与name保持一至,如下图所示
#name的说法
二、生命周期
详情表：
| 生命周期钩子 | 详细 |
|---|---|
| beforeCreate | 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 |
| created | 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |
| mounted | el 被新创建的 vm. |
| before-Update | 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 |
| activated | keep-alive 组件激活时调用。 |
| deactivated | keep-alive 组件停用时调用。 |
| before-Destroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 |
| destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 |
测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title>生命周期</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: "生命周期"
},
beforeCreate () {
console.group('==============' + 'beforeCreated' + '===================')
console.log("%c%s","color:red","el :" + this.$el)
console.log("%c%s","color:red","data :" + this.$data)
console.log("%c%s","color:red","msg :" + this.msg)
},
created () {
console.group('==============' + 'created' + '===================')
console.log("%c%s","color:red","el :" + this.$el)
console.log("%c%s","color:red","data :" + this.$data)
console.log("%c%s","color:red","msg :" + this.msg)
},
beforeMount () {
console.group('==============' + 'beforeMount' + '===================')
console.log("%c%s","color:red","el :" + this.$el)
console.log(this.$el)
console.log("%c%s","color:red","data :" + this.$data)
console.log("%c%s","color:red","msg :" + this.msg)
},
mounted () {
console.group('==============' + 'mounted' + '===================')
console.log("%c%s","color:red","el :" + this.$el)
console.log(this.$el)
console.log("%c%s","color:red","data :" + this.$data)
console.log("%c%s","color:red","msg :" + this.msg)
},
beforeUpdate () {
console.group('==============' + 'beforeUpdate' + '===================')
console.log("%c%s","color:red","el :" + this.$el)
console.log(this.$el)
console.log("%c%s","color:red","data :" + this.$data)
console.log("%c%s","color:red","msg :" + this.msg)
},
updated () {
console.group('==============' + 'updated' + '===================')
console.log("%c%s","color:red","el :" + this.$el)
console.log(this.$el)
console.log("%c%s","color:red","data :" + this.$data)
console.log("%c%s","color:red","msg :" + this.msg)
},
beforeDestroy () {
console.group('==============' + 'beforeDestroy' + '===================')
console.log("%c%s","color:red","el :" + this.$el)
console.log(this.$el)
console.log("%c%s","color:red","data :" + this.$data)
console.log("%c%s","color:red","msg :" + this.msg)
},
destroyed () {
console.group('==============' + 'destroyed' + '===================')
console.log("%c%s","color:red","el :" + this.$el)
console.log(this.$el)
console.log("%c%s","color:red","data :" + this.$data)
console.log("%c%s","color:red","msg :" + this.msg)
}
})
</script>
</body>
</html>
