.sync脚手架父子通讯,生命周期

.sync

    <div id="box">
        //使用v-bind绑定自定义的名称,.sync发送事件名
        <my-com :msg.sync="describe"></my-com>
        {{describe}}//直接使用
    </div>
    <template id="mycom">
        <div>
            {{fn}}
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script type="text/JavaScript">
        let myCom = {
            template:"#mycom",
            computed:{
                fn(){
                    //updata事件名是固定写法,后面的名称可以自己定义,如果后面的自定义名称和子组件中props中的名称相同,那么子组件标签绑定了:msg.sync="describe"就可以实现父子双向绑定的效果
                    //参数二是要传过去的数据
                    this.$emit("update:msg","子组件使用.sync修改父组件的数据")
                }
            }
        }
        let vm = new Vue({
            el:"#box",
            data:{
                describe:""//父组件data中用一个空字符串来接收
            },
            components:{
                myCom
            }
        })
    </script>

在脚手架中实现父子通讯

<!--脚手架中组件一般都是挂载到App下的-->
<template>
    <div>
        <h2>父组件</h2>
        <mySon :msg.sync="arr"></mySon>
        <p>{{arr}}</p>
    </div>
</template>
<script>
    //import 定义的变量 from ""引入组件的地址
    import mySon from "./src/components/mySon.vue"
    //脚手架中需要使用export default将组件暴露出来
    export default{
        //添加子组件
        components:{
            mySon
        },
        data(){
            return{
                arr:""
            }
        }
    }
</script>

<!--子组件模板-->
<template>
    <div>子组件{{fn}}</div>
</template>
<script>
    export default{
        data(){
            return{
                arr:[1,2,3]
            }
        },
        computed:{
            fn(){
                this.$emit("update:msg",this.arr)
            }
        }
    }
</script>

生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

生命周期钩子函数

<template>
   <div>
     <p ref="m">{{msg}}</p>
     <button @click="setMsg">修改</button>
 </div>
</template>

<script>
//this.msg写在this.setMsg后面,打印出的就是修改后的值
export default {
    data() {
       return {
        msg:"初始值"
       }
     },
    methods:{
        setMsg(){
            this.msg="修改后"
            return "被调用了"
        }
    },
    beforeCreate(){//在实例初始化之前执行的函数,此时的数据观察和事件机制都未形成,不能获得DOM节点
        //console.log("===beforeCreate===")
        //console.log(this.msg)//undefined
        //console.log(this.setMsg())报错函数未声明
        //console.log(this.$refs.m)//undefined
    },
    created(){//实例已经创建完成之后被调用
        //实例已完成以下的配置：数据观测（data observer），属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始
        //console.log("===created===")
        //console.log(this.msg)//初始值
        //console.log(this.setMsg())//被调用了
        //console.log(this.$refs.m)//undefined
    },
    beforeMount(){//实例挂载之前调用
        //这个过程是在模版已经在内存中编译完成， render 函数首次被调用，此时完成了虚拟 DOM 的构建，但并未被渲染
        //console.log("===beforeMount===")
        //console.log(this.msg)//初始值
        //console.log(this.setMsg())//被调用了
        //console.log(this.$refs.m)//undefined
    },
    mounted(){//这个过程在模版挂载之后被调用，页面完成渲染，所以在这之后，我们可以操作和访问 DOM 元素
        //console.log("===mounted===")
        //console.log(this.msg)//初始值
        //console.log(this.setMsg())//被调用了
        //console.log(this.$refs.m)//<div>修改后</div>
    },
    beforeUpdate(){//当数据更新之前调用,页面的数据还是旧的,data中的数据是最新的,页面没有和最新的数据保持相同
        //数据必须要写在模板中,不然改变数据也不调用
        //console.log("===beforeUpdate===")
        //console.log(this.msg)//修改后
        //console.log(this.$refs.m.innerText)//初始值
    },
    updated(){//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        //当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
        //然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环
        // console.log("===updated===")
        // console.log(this.msg)//修改后
        // console.log(this.$refs.m.innerText)//修改后
    },
    //在父组件中使用v-if可以销毁
    beforeDestroy(){//实例销毁之前调用。在这一步，实例仍然完全可用
        //页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数
        console.log("===beforeDestroy===")
        console.log(this.msg)//点击修改按钮之后 修改后
        console.log(this.$refs.m.innerText)//点击修改按钮之后 修改后
    },
    destroyed(){//Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
        console.log("===destroyed===")
        console.log(this.msg)//点击修改按钮之后 修改后
        //console.log(this.$refs.m.innerText)//销毁后找不到这个元素,会报错
    }
  }
</script>
beforeCreate(啥也没有) 实例初始化前自己会调用
<!--开始可以获取数据,但不能获取dom节点-->
created(data数据,方法,计算属性...都可以获取调用,但是dom不能获取) 实例初始化后自己会调用
beforeMount(跟created一样,用的还是旧的页面) 挂载前调用,模板加载好了,但是尚未挂载到页面
<!--开始可以获取dom节点-->
mounted(可以获取dom节点) 组件已经完成渲染,如果要操作dom节点,最早要在mounted
<!--数据更新时的函数-->
beforeUpdate(页面上的dom数据还是修改前的) 修改前调用,获取的页面数据还是修改之前的数据,data中的数据是修改后的
updated 修改后调用,数据和页面已经同步,都是最新的
<!--数据销毁时的函数-->
beforeDestroy 销毁组件前调用,这时候还可以获取数据,数据还是销毁前的数据
destroyed 销毁组件后调用,还能打印出data中的数据,组件中的方法属性指令都不能用了