4.27

  <h1 @click="str1Change">{{ str1 }}</h1>
  <h1 @click="objChange">{{ obj.name }}--{{ obj.age }}</h1>
  <h1>{{ str }}</h1>
  <hr>
  <comp-c></comp-c>
</template>
<script>
  import CompC from './components/CompC.vue'
import { computed, reactive, ref, watch,provide } from "vue";
export default {
  name: "App",
  components:{
    CompC
  },
  setup() {
    let str1 = ref("我要谢谢你");
    let str2 = ref("因为有你");
    let obj = reactive({
      name:"张三",
      age:30
    })
    /* vue3中使用provide实现爷爷和孙子组件之间的通信 */
    // 提供数据 提供的数据名，数据值 
    provide('info',obj)

    /* vue3中计算属性的用法 */
    let str = computed(() => {
      return str1.value + str2.value;
    });

    function str1Change() {
      str1.value = "春天花会开";
    }

    function objChange(){
      obj.name = '李四'
    }
    /* vue3中实现对引用数据类型obj的监听 */
    // watch(obj,()=>{
    //   console.log('我被监听了')
    // })

    /* watch对对象里面单独的某一个属性进行监听的时候，需要使用箭头函数的方式 */
    watch(()=>obj.name,()=>{
      console.log('name被监听了')
    })

    /* 在vue3中使用watch监听器 监听基本数据类型 */
    /* watch的第三个参数使用{immediate:true} 可以实现一进入页面就立即监听 */
    // watch(str1, (newV, oldV) => {
    //   console.log("新值是：" + newV);
    //   console.log("旧值是：" + oldV);
    // },{immediate:true});




    return {
      str1,
      str2,
      str,
      obj,
      str1Change,
      objChange
    };
  },
};