10.26 (监听，混入，ref，keep-alive)

监听：

1.普通监听 watch

watch (可以监控一个值的变换，并调用因为变化需要执行的方法，

            可以通过watch动态改变关联的状态  ----  就是实时监听某个数据的变化)

<template>
  <div class="home">
    <input type="text" v-model="msg">
    <h3>{
  {msg}}</h3>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return {
      msg: "你好，世界"
    }
  },
  watch: {
    msg(val, oldVal){
      console.log(val, oldVal)
    }
  }
}
</script>

2.立即监听 immediate

（如果我们需要在最初绑定值的时候也执行函数，则就需要用到 immediate 属性）

（immediate 需要搭配handler一起使用，其在最初绑定时，调用的函数也就是这个 handler 函数）

<template>
  <div class="home">
    <inp