vue 生命周期及watch、计算属性等等的理解

以下属于个人理解，如果不足请各位大佬多多提点

记忆单词 有d无d 有ed等等细节、彻底理解弄懂

Tips:components、watch、computed、methods是以:{}的方式引入，
其他是已(){}的方法引入

<template>
    <div>{{b}}</div>
</template>
<script>
    export default{
    	//data 下面要加return是局部定义变量
    	//data{ } 中直接定义变量是全局定义变量，可能造成数据污染
        data(){
            return {
                a:'A'
            }
        },
        components:{
        		//components 是局部组件引入
        		//component 是全局组件引入
        		//全局组件也可以用 Vue.use()引入
        },
        //第一个生命周期函数，表示实例被完全创建之前运行出来
        //再data和methods都还没有被初始化
        //在methods 和 data 之前执行
        beforeCreate() {
            console.log('components、watch、computed、methods是以:{}的方式引入，其他是已(){}的方法引入');
            console.log('这是 beforeCreate ，data 和 methods还没初始化');
        },
        //第二个生命周期函数  data   and  methods 已经初始化好了
        //created(){} data 和 methods 已经初始化 有了
        created() {
            console.log('我是 created ，data 和 methods 已经有了');
            this.show()
        },
        //第三个生命周期函数，模板已经再内存中编译完成，但是尚未把模板渲染到页面中去
        // beforeMount 没有e 简单理解就是 浏览器已经解析了代码 但还没渲染上去
        beforeMount() {
            console.log('这是 beforeMount ，已经有DOM了');
        },
        //watch 监听data中变量的方法 ，只有当wathc中变量改变时才会变
        watch:{
            'a':function(now,old){
                console.log('now ',now)
            }
        },
        //计算属性 当变量改变时会跟着变化
        //如果computed和watch都能实现的功能 建议用computed
        computed:{
            b:function(){
                console.log('这是 computed')
                return this.a+this.a
            }
        },
        //第四个周期函数内存中的模板 已经真实挂在到了页面中，可以看到渲染好的页面了，当执行完这个，实例已经完全创建好了
        //mounted 执行这个时页面已经渲染出来了 
        mounted() {    //重要
            console.log('这首 mounted ,数据和页面已经好了 但是methods还没执行');
        },
        methods: {
            show() {
                console.log('show执行了');
            }
        },
        //以上mouted（）实例完毕，马上进入到运行阶段
        //第五个周期函数 这俩事件会根据data数据的/*改变*/，有选择性的出发0-n次
        //beforeUpdate 数据最新的 但是页面还没更新
        beforeUpdate() {//这时候表示我们的界面还没有被更新，但是数据已经被更新了
            console.log('这是 beforeUpdate ');
        },
        //第六个周期函数  执行的手页面和data的数据已经保持同步了 都是最新的
        //updated 数据和页面都是最新的
        updated() {
            console.log('这是 updated');
        },
        //第七个周期函数  当执行这里的时候  
        //就已经从运行阶段进入到了销毁阶段了  
        //实例身上所有的data和所有的methods以及过滤器 指令等等，都处于可用状态，还没有真正执行销毁的过程
        //beforeDestory 数据什么都能用 理解为销毁开始
        beforeDestroy() {
            console.log("这是 deforeDestory")
        },
        //第八个周期函数
        //执行到这里的时候组件已经被完全销毁，组件中所有的数据方法指令过滤器 都已经不可用了
        //destoryed 到这里已经全部销毁 什么都不能在用
        destroyed() {
            console.log('这是 destoryed')
        }
    }
</script>