vue系列教程-03vuejs的结构和生命周期
vuejs的结构和生命周期
本内容为系列内容，全部内容请看我的vue教程分类
结构
上一节我们实例化vue的时候传递了一个对象，那么这个对象具体是个什么样的结构那，可以传递一些什么样的值那
<script>
// 实例化一个vue
let vm = new Vue({
// 页面中的挂载点
el: '#app',
// 定义内部数据
data: {
},
// 方法列表
methods: {
},
// 监听事件
watch: {
},
// 计算属性
computed: {
},
// 组件
components: {
},
// 私有过滤器
filters: {
},
//自定义私有指令
directives: {
}
})
</script>
那么围绕这些属性，将是我们本次基础部分的内容
什么是生命周期
我们上一节在created里面执行了一个打印方法，那么我说了这个就类似于jquery的$.ready一样
那么具体有哪些常用的生命周期呢
这个东西就好比人的一生，你出生的时候做什么，成年的时候做什么，反正就是不同的阶段做不动的事情
那么我们就可以利用不同的生命周期来完成不同的事情比如
- 初始化数据
- 开启和关闭进度条
- 关闭页面时保存数据
- ...
vue有哪些生命周期
<script>
let vm = new Vue({
el: '#app',
// 完成创建之前 不能使用data和methods中的数据
beforeCreate() {
console.log('before');
},
// 数据已经初始化
created() {
console.log('created');
},
// 模板已将编辑在内存但是并未渲染，数据还未渲染到页面中
beforeMount() {
},
//vue实例 已经挂载好页面了
mounted() {
},
// 更新页面数据后 内存中data的数据已经改变 但是页面中的数据还没有完成渲染
beforeUpdate() {
},
// 更新数据后 页面和data数据已经同步了
updated() {
},
// 销毁当前实例
destroyed() {
},
})
</script>
这里这么多的生命周期，其实不是所有都是常用的，具体的使用我们会在后面一一讲解，这里只做一个了解
