<div>{{ count }}</div>

<button @click="count++">
  {{ count }}
</button>

<template>
    <div>
        <p>计数器实例: {{ count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div>
</template>

<script> 
import {ref, onMounted} from 'vue';

export default {
    setup(){
        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI
        let count = ref(0);

        // 定义点击事件 myFn
        function myFn(){
            console.log(count);
            count.value += 1;
        }
       
       // 组件被挂载时，我们用 onMounted 钩子记录一些消息
        onMounted(() => console.log('component mounted!'));

        // 外部使用组合API中定义的变量或方法，在模板中可用。
        return {count,myFn} // 返回的函数与方法的行为相同
    }
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <div>
    <h1>姓名：{{ name }}</h1>
    <h1>年龄：{{ obj.age }}</h1>
    <h1>数据：{{ obj.pro.a.b[0] }}</h1>
    <button @click="btn">点击我更新数据</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
const name = reactive('马云') // value cannot be made reactive: 马云
const age = 50
const obj = reactive({
  age,
  pro: {
    a: {
      b: ['我是深层次的数据']
    }
  }
})
function btn() {
  console.log(obj);
  obj.age = 80
  obj.pro.a.b[0] = "我被修改了"
}
</script>

<template>
  <div>
    <h1>姓名：{{ obj.name }}</h1>
    <h1>年龄：{{ obj.age }}</h1>
    <button @click="btn">点击我更新数据</button>
  </div>
</template>

<script setup>
import { toRef } from 'vue';
const obj = {name:'马云',age:50}
const res = toRef(obj,'name')
function btn() {
  console.log(obj);
  res.value='马化腾'
}
</script>

<template>  
  <div>  
    <h1>姓名：{{ name }}</h1>  
    <h1>年龄：{{ age }}</h1>  
    <h1>a：{{ a }}</h1>  
    <h1>b：{{ b }}</h1>  
    <h1>c：{{ c }}</h1>  
    <button @click="updateData">点击我更新数据</button>  
  </div>  
</template>  
  
<script>  
import { reactive, toRefs } from 'vue';  
  
export default {  
  setup() {  
    const obj = reactive({name: '马云', age: 50, a: 1, b: 2, c: 3});  
    const updateData = () => {  
      // 更新数据的逻辑在这里  
      console.log('Data updated!');  
    };  
    return { ...toRefs(obj), updateData };  
  }  
}  
</script>

<template>  
  <div>  
    计算器：<input type="number" v-model="num1"> + <input type="number" v-model="num2"> = <input type="number" v-model="num">
    <br>
    文本拼接：<input type="text" v-model="t1"> + <input type="text" v-model="t2"> = <input type="text" v-model="t">
  </div>  
</template>  
  
<script>  
import { ref,computed,reactive,toRefs } from 'vue';  
  
export default {  
  setup() {  
    // 第一种方法：ref
    let num1 = ref()
    let num2 = ref()

    // 计算器
    const num = computed(()=>{
      return num1.value+num2.value
    })

    // 第二种方法：reactive,toRefs
    const t1=''
    const t2=''
    const obj = reactive({t1,t2})
    // 文本拼接
    const t = computed(()=>{
      return obj.t1+'+'+obj.t2
    })

    return{num1,num2,num,...toRefs(obj),t}


  }  
}  
</script>

<template>  
  <div>
    <h1>{{ p1 }}</h1>
    <button @click="p1++">点击我+1</button>
  </div>  
</template>  
  
<script>  
import { ref,watch } from 'vue';  
  
export default {  
  setup() {  
    const p1=ref(0)
    // 监听p1数据变化
    watch(p1,(newVal,oldVal)=>{
      console.log("新数据",newVal,"旧数据",oldVal);
    })
    return{p1,}
  }  
}  
</script>

<template>
  <div>
    <h1>马云年龄：{{ obj.age }}</h1>
    <button @click="obj.age++">点击我马云年龄+1</button>
  </div>
</template>  
  
<script>
import { watch, reactive } from 'vue';

export default {
  setup() {
    const obj = reactive({
      name: "马云",
      age: 50
    })
    watch(obj, (newVal, oldVal) => {
      console.log("新数据", newVal, "旧数据", oldVal);
    })
    return { obj }
  }
}  
</script>

只能监听到最新的结果，上一个的数据是监听不到的
新数据 Proxy(Object) {name: '马云', age: 51} 旧数据 Proxy(Object) {name: '马云', age: 51}
新数据 Proxy(Object) {name: '马云', age: 52} 旧数据 Proxy(Object) {name: '马云', age: 52}
新数据 Proxy(Object) {name: '马云', age: 53} 旧数据 Proxy(Object) {name: '马云', age: 53}

<template>
  <div>
    <h1>马云年龄：{{ obj.age.num }}</h1>
    <button @click="obj.age.num++">点击我马云年龄+1</button>
  </div>
</template>  
  
<script>
import { watch, reactive } from 'vue';

export default {
  setup() {
    const obj = reactive({
      name: "马云",
      age: {
        num:50
      }
    })
    watch(()=>obj.age.num, (newVal, oldVal) => {
      console.log("新数据", newVal, "旧数据", oldVal);
    },{immediate:true})   // {immediate:true} 进入页面立即进入监听
    return { obj }
  }
}  
</script>

新数据 50 旧数据 undefined
新数据 51 旧数据 50
新数据 52 旧数据 51
新数据 53 旧数据 52

<template>
  <div>
    <h1>马云年龄：{{ obj.age.num }}</h1>
    <button @click="obj.age.num++">点击我马云年龄+1</button>
  </div>
</template>  
  
<script>
import { watchEffect, reactive } from 'vue';

export default {
  setup() {
    const obj = reactive({
      name: "马云",
      age: {
        num:50
      }
    })
    watchEffect(()=>{
      console.log(obj.age.num);
    })
    return { obj }
  }
}  
</script>

<template>
  <div>
    <h1>姓名：{{ obj.name }}</h1>
    <h1>年龄：{{ obj.age.num }}</h1>
    <button @click="obj.age.num++">点击我马云年龄+1</button>
    <br>
    <h1>姓名：{{ obj1 }}</h1>
    <h1>年龄：{{ obj2 }}</h1>
    <button @click="obj2++">点击我马化腾年龄+1</button>
  </div>
</template>  
  
<script>
import { shallowRef } from 'vue';

export default {
  setup() {
    const obj = shallowRef({
      name:'马云',
      age:{
        num:50
      }
    })
    const obj1 = shallowRef('马化腾')
    const obj2 = shallowRef(50)
    return { obj,obj1,obj2 }
  }
}  
</script>

<template>
  <div>
    <h1>姓名：{{ obj.name }}</h1>
    <h1>年龄：{{ obj.age.num }}</h1>
    <button @click="obj.name+='1'">点击我马云姓名+1</button>
    <button @click="obj.age.num++">点击我马云年龄+1</button>
  </div>
</template>

<script>
import { shallowReactive } from "vue";

export default {
  setup() {
    const obj = shallowReactive({
      name: "马云", // 第一层
      age: {
        num: 50,  // 第二层
      },
    });
    return { obj };
  },
};
</script>

<script>
import HelloWorld from './components/HelloWorld.vue'
import {reactive,provide} from 'vue'
export default{
  name:'App',
  components:{
    HelloWorld
  },
  setup(){
    const p1 = reactive({name:'马云',age:50})
    provide('aaa',p1)  // 传递
    return{p1}
  }
}
</script>

<template>
  <div class="back">
    我是父组件
    <h3>{{ p1.name }}</h3>
    <h3>{{ p1.age }}</h3>
  </div>
  <HelloWorld/>  
</template>

<style>
.back{
  background-color: darkkhaki;
  padding: 20px 0;
}
</style>

<script>
import { inject } from 'vue'
export default{
  setup() {
    const p1 = inject('aaa')  // 接收
    const p2 = inject('bbb',"接收为空默认值")
    console.log(p1);
    return{p1,p2}
  }
}
</script>

<template>
  <div class="back">
    这是子组件
    <h2>{{ p1.name }}</h2>
    <h2>{{ p1.age }}</h2>
    <h2>{{ p2 }}</h2>
  </div>
</template>

<style scoped>
.back{
  background-color: brown;
  color: cyan;
  padding: 20px 0;
}
</style>

<script>
import HelloWorld from './components/HelloWorld.vue'
import {reactive,ref} from 'vue'
export default{
  name:'App',
  components:{
    HelloWorld
  },
  setup(){
    const val = ref()
    const p1 = reactive({name:'马云',age:50})
    // provide('aaa',p1)  // 传递
    function btn(){
        val.value.qqq(p1)
    }
    return{p1,btn,val}
  }
}
</script>

<template>
  <div class="back">
    我是父组件
    <h3>{{ p1.name }}</h3>
    <h3>{{ p1.age }}</h3>
    <button @click="btn">给子组件传值</button>
  </div>
  <HelloWorld ref="val"/>  
</template>

<style>
.back{
  background-color: darkkhaki;
  padding: 20px 0;
}
</style>

<script>
import { ref } from 'vue'
export default{
  setup() {
    const p1 = ref('')
    function qqq(val){
      console.log('我被父组件调用了')
      p1.value = val
    }
    return{qqq,p1}
  }
}
</script>

<template>
  <div class="back">
    这是子组件
    <h2>{{ p1.name }}</h2>
    <h2>{{ p1.age }}</h2>
  </div>
</template>

<style scoped>
.back{
  background-color: brown;
  color: cyan;
  padding: 20px 0;
}
</style>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { plbLic } from './stores/public' // 使用花括号进行命名导入
export default{
  name:'App',
  components:{
    HelloWorld
  },
  setup(){
    const res_a = plbLic()
    return{res_a}
  }
}
</script>

<template>
  <div class="back">
    我第一个页面
    <h3>{{ res_a.name }}</h3>
    <h3>{{ res_a.age }}</h3>
  </div>
  <HelloWorld/>  
</template>

<style>
.back{
  background-color: darkkhaki;
  padding: 20px 0;
}
</style>

<script>
import { onMounted } from 'vue'
import { plbLic } from '../stores/public' // 使用花括号进行命名导入

export default {
  setup() {
    const res_a = plbLic();
    return { res_a };
  }
}
</script>

<template>
  <div class="back">
    我是第n个页面
    <h3>{{ res_a.name }}</h3>
    <h3>{{ res_a.age }}</h3>
  </div>
</template>

<style scoped>
.back{
  background-color: brown;
  color: cyan;
  padding: 20px 0;
}
</style>