vue2的生命周期

组件在创建(beforecreate,created)、挂载(beforemount,mounted)、更新(beforeupdate,updated)、卸载(beforeunmount,unmounted)的过程，执行回调。

父组件挂载的时候，子组件就开始创建挂载，完成后父组件完成挂载

在缓存组件keep-alive里的组件，多次切换该组件不会创建和销毁，vue新增了两个生命周期来监听切换事件。当进入到该组件时调用activated() 函数，当离开该组件时调用deactivated() 函数

组件的v-model使用

实际上就是父子组件共用同一个数据并双向绑定,在表单组件用较多

父组件使用v-model绑定数据传给子组件,更新数据的方法名为update:modelValue

    <h1>{{ message }}</h1>
    <h1>{{ name }}</h1>

    <Message v-model="message"></Message>
    <!-- 等价于下行，默认传的属性名叫modelValue 更新数据的方法名为update:modelValue -->
    <!-- <Message :modelValue="message" @update:modelValue="message = $event"></Message> -->

    <!-- 设置名称，传多个v-model -->
    <Message v-model:msg="message" v-model:name="name"></Message>

子组件，这样改变子组件input的值 父组件也会双向绑定修改

    <!-- 实现与父组件双向绑定的方法 -->
    <input type="text" :value="modelValue" @input="changeVal">

    <!-- 绑定props的值是不对的，props的值是只读不可改的,但可以通过计算属性获取 -->
    <input type="text" v-model="thisMsg" >
    <input type="text" v-model="thisName" >
    
    props: {
        msg: String,
        name: String,
    },
    emits: ["update:msg","update:name"],
    methods: {
        changeVal(event){
          this.$emit("update:msg", event.target.value)
        }
    },
    computed: {
        thisMsg: {
          set(value){
            this.$emit("update:msg", value)
          },
          get(){
            return this.msg
          }
        },
        thisName: {
          set(value){
            this.$emit("update:name", value)
          },
          get(){
            return this.name
          }
        }
    }