Vue3框架中CompositionAPI的基本使用(第十课)

1.Setup函数

理解：Vue3.0中一个新的配置项，值为一个函数。
setup是所有Composition API（组合API）“ 表演的舞台 ”。
组件中所用到的：数据、方法等等，均要配置在setup中。
setup函数的两种返回值：
1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
注意点：
1. 尽量不要与Vue2.x配置混用
  - Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
  - 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
  - 如果有重名, setup优先。
2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

2.Ref函数

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据： xxx.value
- 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
- 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

3.Reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

4.Vue3.0中的响应式原理

Vue3.0中的响应式原理(第九课)_星辰镜的博客-CSDN博客

vue2.x的响应式

实现原理：
- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
```
Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})
```
存在问题：
- 新增属性、删除属性, 界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。

5.reactive对比ref

从定义数据角度对比：
- ref用来定义：基本类型数据。
- reactive用来定义：对象（或数组）类型数据。
- 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
从原理角度对比：
- ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
- reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
从使用角度对比：
- ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
- reactive定义的数据：操作数据与读取数据：均不需要.value。

6.setup的两个注意点

setup执行的时机
- 在beforeCreate之前执行一次，this是undefined。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
  - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
  - slots: 收到的插槽内容, 相当于 this.$slots。
  - emit: 分发自定义事件的函数, 相当于 this.$emit。

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
	console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

01_Vue3的起步setup函数的使用

<template>
  <div class="app">
    <h1>01_setup函数的使用的基本参数 props context</h1>
    <!-- 自动取出 .vule的值 -->
    <h2>计数器的内容实现:</h2>
    <h3>{{ counter }}</h3>
    <button @click="add">单机+1</button>
    <button @click="del">点击-1</button>
    <!-- 在父组件中定义一个属性 -->
    <showprosshow message="App说我是父组件专递给子组件的信息showprosshow"></showprosshow>
    <!-- 非props的内容-->
    <showprosshow class="我是非porpos的内容信息"></showprosshow>
    <showprosshow @getMessage="showMessage"></showprosshow>
    <ReactiveShow></ReactiveShow>
  </div>
</template>


<script>
import showprosshow from './components/showprosshow.vue'
// ReactiveShow使用
import ReactiveShow from './components/ReactiveShow.vue'
import { ref } from "vue";
export default {
  components: {
    showprosshow,
    ReactiveShow
  },
  // setup函数信息
  setup(props, context) {
    let counter = ref(0);
    const add = () => {
      counter.value++;
      //   counter++;
      console.log(counter);
    };

    const del = () => {
      counter.value--;
      //   counter--;
      console.log(counter);
    };

    const showMessage=(e)=>{
        console.log("showMessage")
        console.log(e)
    }
    return {
      counter,
      add,
      del,
      showMessage
    };
  },
};
</script>



<style scoped>
button {
  margin-left: 10px;
  width: 200px;
  height: 60px;
  line-height: 60px;
  color: red;
  font-size: 20px;
  background-color: azure;
  border: 1px solid royalblue;
}

h1 {
  color: lightcoral;
}

h2 {
  color: cornflowerblue;
}
h3 {
  color: red;
}

h4 {
  color: yellowgreen;
}
</style>

<template>
  <div class="ReactiveShow">
    <h1>ReactiveShow</h1>
    <h2>ReactiveShow计数器的内容实现:</h2>
    <h3>{{ counter }}</h3>
    <button @click="add">单机+1</button>
    <button @click="del">点击-1</button>
    <hr>
    <h1>{{infoObject}}</h1>
    <h2>{{aaccount}}</h2>
    <button @click="updateinfoObject">updateinfoObject</button>
    <hr>
    <h4>{{list}}</h4>
  </div>
</template>


<script>
import { ref,reactive,onMounted } from "vue";
export default {
  name: "ReactiveShow",
  // setup函数信息
  
  setup() {
    let counter = ref(0);
    const add = () => {
      counter.value++;
      //   counter++;
      console.log(counter);
    };
    const del = () => {
      counter.value--;
      //   counter--;
      console.log(counter);
    };
    const showMessage = (e) => {
      console.log("showMessage");
      console.log(e);
    };

    let infoObject =reactive({
        name:"tome",
        age:23,
        height:178

    })

    let aaccount=reactive({
        username:'username_shoput',
        userpawwast:"123456"
    })

    let list=ref([])

    onMounted(()=>{
        const reslist=reactive(["我是元素的AA","我是元素BBB","我是元素CCC","我喜欢睡觉DDD"])
        list.value=reslist
    })
    function updateinfoObject(){
        infoObject.age++
        console.log("updateinfoObject")
    }
    return {
      counter,
      add,
      del,
      showMessage,
      infoObject,
      updateinfoObject,
      aaccount,
      list,
      onMounted
    };
  },
};
</script>



<style scoped>
button {
  margin-left: 10px;
  width: 200px;
  height: 60px;
  line-height: 60px;
  color: red;
  font-size: 20px;
  background-color: rgb(101, 173, 173);
  border: 1px solid royalblue;
}
h4{
    color: red;
}
</style>

<template>
    <div class="showprosshow">
       <h1> showprosshow我们自己编写的页面信息</h1>
       <i><big><h2>{{message}}</h2></big></i>
       <!-- 子组件向父组件专递的信息 -->
       <button @click="setMessage">子——>父</button>

    </div>
</template>


<script>

export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:'showprosshow',
    props:['message'],
    emits:["getMessage"],
    setup(props,context){
        console.log("在子组件中打印父组件专递过来的内容·")
        console.log(props.message)
        console.log(context.attrs.class)

        // 定义函数
        function setMessage(){
            console.log("将子组件的信息专递给父组件的内容")
            context.emit("getMessage","将信息放回给父组件的内容利用的函数是getMessage子-------->父")

        }

        return{
            setMessage
        }

    }

}
</script>



<style scoped>
button {
  margin-left: 10px;
  width: 200px;
  height: 60px;
  line-height: 60px;
  color: red;
  font-size: 20px;
  background-color: azure;
  border: 1px solid royalblue;
}

h1 {
  color: rgb(0, 255, 119);
}

h2 {
  color: cornflowerblue;
}
h3 {
  color: red;
}

h4 {
  color: yellowgreen;
}
</style>

02_Vue3Composition基本使用 API

<template>
  <div class="app">
    <h2>Vue3 – Composition API 的学习内容介绍</h2>
    <p></p>
    <div>
      <h3>Composition API 的启动学习</h3>
      
      <h2>Composition API 的启动学习 data methods computed watch 声明周期函数</h2>
      <!-- 案例一 @1 SetUp函数的起步 -->
      <div class="count">{{ count }}</div>
      <button @click="add">+1</button>
      <button @click="del">-1</button>
      <p></p>

    </div>
    <!-- 在SetUpProps 定义 message="showinfor" -->
    <SetUpProps message="我是父组件向子组件转送一个消息" class="ShowinforCcontext" age="123"></SetUpProps>
    <p></p> 
    <ReactiveShow></ReactiveShow>
    <p></p>
    <!-- Readonly 的使用 -->
    <readonly></readonly>
    <p></p>
    <WatchInfo></WatchInfo>
    <!--Computed计算机的属性使用  -->
    <ComputedInfo></ComputedInfo>
    <!-- LifeFunction -->
    <LifeFunction></LifeFunction>
    <!-- 注册函数 -->
    <ProvideFunction></ProvideFunction>
    <InjectFunction></InjectFunction>
  </div>
</template>


<script>
import {ref}  from 'vue'
import SetUpProps from './components/SetUpProps.vue'
import ReactiveShow from './components/ReactiveShow.vue'
import readonly from './components/readonly.vue'
import WatchInfo from './components/WatchInfo.vue'
import ComputedInfo from './components/ComputedInfo.vue'
// LifeFunction
import LifeFunction from './components/LifeFunction.vue'
// 
import ProvideFunction from './components/ProvideFunction.vue'
import  InjectFunction from './components/InjectFunction.vue'
export default {
  // setup函数  ReactiveShow
  // RefApl
  setup(props,context) {

    let count = ref(78);
    // console.log(this)
    const add = () => {
      count.value+=3
      console.log(count);
    };

    const del = () => {
      count.value-=2
      console.log(count);
    };

    

    // SetUp函数的返回值 SetUp返回值 对应的Data
    return {
      count,
      add,
      del,
      ReactiveShow,
      

    };
  },

  data() {
    return {
      message: 0,
    };
  },


  // Vue2的写法
  methods: {
    // add() {
      // this.message++;
    // },
    // del() {
      // this.message--;
    // },
  },

  components: {
    SetUpProps,
    ReactiveShow,
    readonly,
    WatchInfo,
    ComputedInfo,
    LifeFunction,
    ProvideFunction,
    InjectFunction,


  },
};
</script>



<style scoped>
h1{
  color: rgb(0, 0, 0);
}
h2{
  color: black;
}
h3{
  color: red;
}
h4{
  color: green;
}
p{
  width: 100%;
  height: 40px;
  background-color: lightskyblue;
  border-radius: 12px;
}
.count{
  width: 200px;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  height: 100px;
  color: white;
  background-color: rgb(41, 106, 109);
}
</style>

<template>
  <div class="ComputedInfo">
    <h1>ComputedInfo</h1>
    <p><input type="text" name="" id="" v-model="age" /></p>
    <p><input type="text__" name="" id="" v-model="nextAge" /></p>
    <h1>{{ FistName + "______" + LastName }}</h1>
    <!-- 对象的遍历 -->
    <h2>{{ Name.name }}</h2>
    <!-- 数组的遍历 -->
    <h2>{{ Arr }}</h2>
    <h3>{{data}}</h3>
  </div>
</template>


<script>
import { computed, ref } from "vue";
export default {
  setup() {
    const age = ref(89);
    const nextAge = computed(() => {
      return +age.value + 1;
    });

    const LastName = "星辰";

    const FistName = "大海";

    const Name = {
      name: "请输入你的姓名",
      age: "请输入你的年龄",
      height: "请输入你的身高",
      weight: "请输入你的体重",
    };

    let data={
        scor:90
    }

    const Arr = ["1001001", "1001002"];
    return {
      age,
      nextAge,
      FistName,
      LastName,
      Name,
      Arr,
      data
    };
  },
};
</script>



<style scoped>
</style>

<template>
  <div class="LifeFunction">
    <h1>LifeFunction生命周期函数</h1>
  </div>
</template>


<script>
// 导入自己需要的生命周期函数
import {
  beforCreate,
  Created,
  beforeMount,
  mounted,
  onBeforeUpdate,
  updated,
  beforeUnmount,
  unmounted,
  activated,
  deactivated,
} from "vue";

export default {
  setup() {
    // beforCreate(()=>{
        // console.log("123")
    // })
    //   Created(()=>{
        // console.log("123")
    //   })
    //   beforeMount(()=>{
        // console.log("123")
    //   })
    //   mounted(()=>{
        // console.log("123")
    //   })
    //   onBeforeUpdate(()=>{
        // console.log("123")
    //   })
    //   updated(()=>{
        // console.log("123")
    //   })
    //   beforeUnmount(()=>{
        // console.log("123")
    //   })
    //   unmounted(()=>{
        // console.log("123")
    //   })
    //   activated(()=>{
        // console.log("123")
    //   })
    //   deactivated(()=>{
        // console.log("123")
    //   })

    return {
      beforCreate,
      Created,
      beforeMount,
      mounted,
      onBeforeUpdate,
      updated,
      beforeUnmount,
      unmounted,
      activated,
      deactivated,
    };
  },
};
</script>



<style scoped>
</style>

<template>
  <div class="ReactiveShow">
    <h2>ReactiveApl函数的使用</h2>
    <p></p>
    <!-- 函数的响应式原理 -->
    <div>
      <h4>{{ count }}</h4>
      <h1>{{ info }}</h1>

      <button @click="updateinfo">激发函数</button>
      <button @click="info.age++">updateinfo++</button>
      <p></p>
      
      <h1>{{ list }}</h1>
      <p></p>
    </div>
  </div>
</template>


<script>
// 导入自己需要的函数
import { reactive, onMounted, onBeforeMount, readonly } from "vue";
export default {
  name: "ReactiveShow",
  setup() {
    let info = reactive({
      name: "I Like Soo See Week",
      age: 90,
    });

    function updateinfo() {
      console.log(info);
      info.age+=9;
    }

    let list = reactive([]);
    // let list =reactive([])

    onMounted(() => {
      const reslist = ["我叫张飒", "我叫老刘", "我叫ness"];
      list[0] = reslist[0];
    });
    console.log(list);

    // 返回的信息内容
    return {
      reactive,
      info,
      updateinfo,
      list,
    };
  },
};
</script>



<style scoped>
p{
  width: 100%;
  height: 20px;
  background-color: lightblue;
  border-radius: 12px;
}

h1{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 30px;
  color: forestgreen;
}
button{
  width: 200px;
  height: 60px;
  border-radius: 12px;
  color: red;
  background-color: rgb(234, 247, 255);
  font-weight: 900;
}
</style>

<!-- eslint-disable no-undef -->
<template>
  <div class="readonly">
    <h1>我自己认识到的readonly对象函数</h1>
    <p></p>
    <!-- 将info的数据返回出来 -->
    <ReactiveShow :info="info" @getInfo="updateinfo"></ReactiveShow>
    <p></p>
    <!-- 单项数据流 -->
    <!-- <button @click="info.name = '我是修改的数据信息'">修改属性</button> -->
    <button @click="info.name = '我是修改的数据信息'">修改属性</button>
    <p></p>
    <ReactiveShow :infos="infos" @getInfo="updateinfo"></ReactiveShow>
    <p></p>
    <button @click="setMessage">修改属性Readonly</button>
  </div>
</template>


<script>
import ReactiveShow from "./readonlySon.vue";
import { reactive, readonly } from "vue";
export default {
  setup(props, context) {
    let obj = reactive({
      name: "我是Readonly.vue文件",
      age: 89,
      height: 190,
      weight: 89,
    });
    // 修改数据
    const info = readonly(obj);

    // 返回的对象步能修改
    let infos = readonly({
      name: "我是Readonly.vue文件123",
      age: 39,
      height: 190,
      weight: 89,
    });
    function setMessage() {
      context.emit("getInfo","我叫李思打印")
      return{
        setMessage
      }
    }

    return {
      info,
      infos,
      setMessage,
    };
  },
  // eslint-disable-next-line vue/multi-word-component-names
  name: "readonly",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
  // 注册组件的内容信息
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ReactiveShow,
  },
};
</script>



<style scoped>
* {
  color: rgb(0, 0, 0);
}
p{
  height: 30px;
  background-color: rgb(175, 242, 180);
  border-radius: 12px;
}
button{
  width: 200px;
  height: 40px;
  font-size: 26px;
  color: red;
}
</style>

<template>
  <div class="readonlySon">
    <h2 @click="btnclick">{{ message }}</h2>
    <p></p>
    <h2>info:{{ info }}</h2>
    <h2>infos:{{ infos }}</h2>
    <p></p>
    <button @click="setinfo">updateinfo</button>
  </div>
</template>


<script>
export default {
  props: ["info","infos"],
  setup(props, context) {
    function setinfo(){
        context.emit("getInfo",'李四')
    }
    

  },
  name: "readonlySon",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
};
</script>



<style scoped>
p{
  height: 40px;
  width: 100%;
  background-color: rgb(193, 211, 246);
}
</style>

<template>
  <div class="SetUpProps">
    <h1>@2 SetUp参数的使用 props context</h1>
    <h1>SetUpProps</h1>
    <h1>{{ message }}</h1>
    <h1>SetUp中的Ref</h1>
    <h2 ref="titleref">我是案例信息SetUp中的Ref函数信息</h2>
  </div>
</template>


<script>
import {ref} from 'vue'
export default {
  name: "SetUpProps",
  props: ["message"],
  setup(props, context) {
    // alert("接收父组件的内容信息打印出来");
    console.log(props.message);
    // 所有的非prop的attriblue
    console.log(context.attrs.class);
    console.log(context.attrs.age)
    const titleref=ref(null)
    return {
        titleref
    };
  },
};
</script>



<style scoped>
</style>

<template>
  <div class="WatchInfo">
    <h1>Watch属性的选择</h1>
    <h1>{{ counter }}</h1>
    <button @click="counter++">+1</button>
    <button @click="counter -= 3">+1</button>
    <p></p>
    <h2>{{ info }}</h2>
    <button @click="update">修改</button>
    <button @click="info.friends.name = '我是修改的内容信息'">修改name属性</button>
  </div>
</template>


<script>
import { ref, watch, reactive, watchEffect } from "vue";

export default {
  name: "WatchInfo",
  setup() {
    let counter = ref(0);
    const stop = watchEffect(() => {
      if (counter.value > 10) {
        stop();
      }
    });

    let info = reactive({
      name: "infor",
      age: 89,
      friends: {
        name: "我是李四哈",
        age: 89,
        sex: "男",
      },
    });
    watch(
      info,
      (n, o) => {
        console.log(n, o);
        // console.log(counter)
      },
      {
        deep: true,
        immediate: true,
      }
    );

    watch(counter, (n, o) => {
      console.log(n, o);
      // console.log(counter)
    });

    watch([counter, info], (n, o) => {
      console.log(n, o);
    });

    watchEffect(() => {
      console.log(info, counter.value);
    });

    // watch(()=>{},()=>,{})

    return {
      counter,
      info,
    };
  },
  data() {
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      counter: 0,
    };
  },
  watch: {
    // 用户监听数据
    // counter(n,o){
    // console.log(n,o)
    // }
    // counter:{
    // handlen(a,b){
    // console.log(a,b)
    // },
    // deep:true,
    //
    // }
  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
};
</script>



<style scoped>
*{
  background-color: rgb(219, 251, 221);
}

p{
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
}

</style>

<template>
    <div class="InjectFunction">
        <h1>InjectFunction</h1>
        <h2>{{counter}}</h2>
        <h2>{{infoObject}}</h2>

    </div>
</template>


<script>

import {inject,Provide,props,context} from 'vue'
export default{
    name:'app',
    setup(props,context){
    const car = inject('car')
    return {car}
    }
}
</script>



<style scoped>
*{
    background-color: rgb(198, 241, 255);
}

</style>

<template>
  <div class="app">
    <h1>ProvideFunction</h1>
  </div>
</template>


<script>
import {inject,provide,reactive} from 'vue'
export default {
  name: "app",
  setup(){

    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)

  }
};
</script>



<style scoped>
*{
    background-color: rgb(206, 247, 224);
}
</style>

02-1_Vue3.0对Composion的补充

<template>
  <div class="app">
    <h3 style="color: red">Provide和Inject基本使用</h3>
    <h1 @click="beforeCreate()">主版块的内容信息</h1>
    <home></home>
    <hr />
    <content></content>
  </div>
</template>


<script>
import content from "./components/content.vue";
import home from "./components/home.vue";

export default {
  name: "app",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },

  components: {
    // eslint-disable-next-line vue/no-unused-components
    content,
    // eslint-disable-next-line vue/no-unused-components
    home,
  },
  methods: {
    // 函数模块
    beforeCreate() {
      console.log("初始化事件和生命周期");
      
      
    },
    
    created(){
      console.log("初始化注入&响应性")
    },


    beforMount(){
      confirm.log("是否有template选项")
    },

    mounted(){
      console.log("创建apl$el并增加到el")
    },
    

    // eslint-disable-next-line @typescript-eslint/no-empty-function
    beforeUpdate(){
      console.log("已经挂载当数据发生变化是执行beforeUpdate虚拟Dom")
    },

    updated(){
      console.log("虚拟Dom重新渲染和更新")

    },

    beforeUnmount(){
      console.log("当调用了app.unmount后")
    },

    unmounted(){
      console.log("已经删除")
    }



    

  },
};
</script>



<style scoped>
</style>

<template>
  <div class="content">
    <home></home>、
    {{info}}
  </div>
</template>


<script>
import home from "../components/home.vue";
import {inject} from 'vue'
export default {
  setup(){

    return{

    }
  },
  // eslint-disable-next-line vue/multi-word-component-names
  name: "content",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  // 定义对象
  // 在这个组件中定义对象
  provide: {
    name: "李四",
    age: 20,
    height: 123,
    weight: 78,
    email: "2678903458@qq.com",
    qq: "2386754567",
    weixing: "12389999933",
  },
  // 函数的写法

  methods: {
    btnclick() {
      console.log("为难忘");
    
    },
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    home,
  },
};
</script>



<style scoped>
</style>

<template>
  <div class="home">
    <content></content>
    <table>
      <h6>
        在home.vue组件中和content组件中利用 provide定义对象 利用 inject取出对象
      </h6>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
        <th>体重</th>
        <th>邮箱</th>
        <th>qq</th>
        <th>微信</th>
      </tr>
      <tr>
        <td>
          <span>{{ name }}</span>
        </td>
        <td>
          <span>{{ age }}</span>
        </td>
        <td>
          <span>{{ height }}</span>
        </td>
        <td>
          <span>{{ weight }}</span>
        </td>
        <td>
          <span>{{ email }}</span>
        </td>
        <td>
          <span>{{ qq }}</span>
        </td>
        <td>
          <span>{{ weixing }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import content from "../components/content.vue";
// 导入
import { provide } from "vue";
// home 与content组件为兄弟元素
export default {
  setup() {
    return {};
  },

  // eslint-disable-next-line vue/multi-word-component-names
  name: "home",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    content,
  },
  //   取值
  inject: ["name", "age", "height", "weight", "email", "qq", "weixing"],

  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
};
</script>



<style scoped>
.home {
  background-color: rgb(214, 248, 177);
  display: flex;
}
.home span {
  font-size: 20px;
  background-color: rgb(236, 253, 239);
  color: red;
  flex: 1;
}
table {
  width: 100%;
  background-color: rgb(235, 255, 153);
  color: rgb(255, 0, 0);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

td {
  width: 18%;
  border-radius: 10px;
}
td {
  text-align: center;
  line-height: 60px;
  height: 60px;
  border: 3px solid green;
}
</style>

03_Vue3函数封装的思想

<template>
  <div class="app">
    appup
    <h1>Abb:{{ count }}</h1>
    <button @click="add">+1</button>
    <button @click="del">-1</button>
    <aboutconunter></aboutconunter>
    <Homeconunter></Homeconunter>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</template>


<script>
import aboutconunter from "./components/about-conunter.vue";
import Homeconunter from "./components/Home-conunter.vue";
import UserTitle from './hook/usertitle'
import userScollPerson from './hook/userScoll'
import { ref } from "vue";
export default {
  setup() {
    let count = ref(10);
    function add() {
        count.value++
    }
    function del() {
        count.value--
    }
    UserTitle("我是App页面信息")

    userScollPerson()
    return {
      count,
      UserTitle,
      add,
      del,
      userScollPerson
    };
  },
  name: "app",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    aboutconunter,
    Homeconunter,
  },
};
</script>



<style scoped>
*{
    background-color: aliceblue;
}
button {
  width: 100px;
  height: 60px;
  color: red;
  font-weight: 900;
  background-color: green;
  margin-left: 40%;
}
</style>

<template>
  <div class="about-conunter">
    about-conunter
    <h1>{{ count }}</h1>
    <button @click="add">+1</button>
    <button @click="del">-1</button>
  </div>
</template>


<script>

import userCount from "../hook/usercount";
export default {
  setup() {
    return {
      ...userCount(),
      
    };
    
  },
};
</script>



<style scoped>
*{
    background-color: coral;
}
button {
  width: 100px;
  height: 60px;
  color: red;
  font-weight: 900;
  margin-left: 20%;
}
</style>

<template>
  <div class="Home-conunter">
    Home-conunter
    <h1>{{ count }}</h1>
    <button @click="add">+1</button>
    <button @click="del">-1</button>
  </div>
</template>

<script>

import { ref } from "vue";
import useCounter from '../hook/usercount';
export default {
  setup() {
  
    let {count,add,del} =useCounter()
    return {
      count,
      add,
      del,
    };
  },
  name: "app",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components

  
  },
};
</script>



<style scoped>
button {
  width: 100px;
  height: 60px;
  color: red;
  font-weight: 900;
  background-color: black;
  margin-left: 30%;
}
</style>

import { ref } from "vue";
export default function useCounter(){
    let count = ref(10);
    function add() {
        count.value++
    }
    function del() {
        count.value--
    }

    return{
        count,add,del
    }

}

04_ReactivApl基本使用

<template>
  <div class="app">
    认识Composition 中的Reactive函数
    <h1>{{ counter }}</h1>
    <button @click="add">《+1》</button>
    <button @click="del">《-1》</button>
    <button>修改人的信息内容</button>
    <button @click="addcolor">Vue3增加属性</button>
    <h1>一个人的信息</h1>

    <button @click="setHellow">Vue-3说话</button>
    <button @click="say">Vue-2说话</button>
    <h1 @click="changeinfo">我是setup函数的内容信息</h1>
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h2>性别:{{ sex }}</h2>
    <h3>工作的种类信息</h3>
    <h4>{{ job.id }}</h4>
    <h4>{{ job.type }}</h4>
    <h4>{{ job.salary }}</h4>
    <h1>{{ job.a.b.c.d }}</h1>
    <h1>{{ hoby }}</h1>
  </div>
</template>
  
  
  <script>
// 导入包名ref
// reference implement
import { ref, reactive } from "vue";
export default {
  // 测试
  setup() {
    // 数据

    // get set

    let name = ref("张三");
    let age = ref(89);
    let sex = ref("女");
    let job = reactive({
      id: "1009001",
      type: "后端开发工程师",
      salary: "50k",
      a: {
        b: {
          c: {
            d: 66666,
          },
        },
      },
    });

    let hoby = reactive(["1111", "22222", "333333"]);
    console.log(name);
    console.log(age);
    console.log(sex);

    function changeinfo() {
      alert("开始修改");
      name.value = "李四";
      age.value = 24;
      sex.value = "女";
      //console.log(name);
      //console.log(age);
      console.log(job);
      //job.value.type="后端开发"
      job.a.b.c.d = 9999;
      //console.log(job.value)
      hoby[0] = 90;
    }

    function addcolor(){
      job.color="blue"
    }

    // 方法名
    function setHellow() {
      // alert(`我叫 ${name},我${age}岁呀！你好呀`)
    }

    // 定义变量counter
    let counter = ref(0);
    let add = () => {
      counter.value++;
      console.log(counter);
      // console.log("add");
    };
    let del = () => {
      counter.value--;
      // console.log(counter)
      // console.log("del");
    };

    // 返回的是对象
    return {
      counter,
      hoby,
      job,
      add,
      del,
      name,
      age,
      sex,
      addcolor,
      setHellow,
      changeinfo,
    };
    // 返回函数为
    // return ()=>{return h('h1','上学')}
  },

  data() {
    // return {
    // sex: "男",
    // };
  },
  methods: {
    say() {
      alert("欢迎来到setup函数的学习内容");
    },
  },
};
</script>
  
  
  
  <style scoped>
</style>

<template>
  <div class="app">
    <h1>我们自己编写的页面信息</h1>
    <h2 @click="btnclick">{{ message }}</h2>
    <!-- vue 2响应式原理 -->
    <ul>
      <li v-show="person.name">{{ person.name }}</li>
      <li>{{ person.age }}</li>
      <li>{{ person.sex }}</li>
      <li>{{ person.height }}</li>
      <li>{{ person.weight }}</li>
      <li v-show="person.like">{{ 爱好 }}</li>
    </ul>

    <button @click="addsex">增加属性</button>
    <button @click="delname">删除属性</button>

    <!-- Vue三 的响应式原理 -->
  </div>
</template>


<script>
import Vue from "vue";
export default {
  name: "app",
  data() {
    return {
      message: "Hello world vue cli",

      person: {
        name: "张三",
        age: 34,
        sex: "男",
        height: "190",
        weight: 56,
      },
    };
  },
  methods: {
    addsex() {
      console.log(this.person.like);
      this.person.like = "网站血虚";
      console.log(this.person.like);
      // Vue.$set(this.person,'like','王者荣耀')
    },
    delname(){
      console.log(this.person.name);
      delete   this.person.name 
      console.log(this.person.name);
      // Vue.$set(this.person,'like','王者荣耀')
    },
  },
};
</script>



<style scoped>
</style>

05_SetUp函数的语法糖的写法

<template>
    <div class="app">
       <h1> 05_SetUp函数的语法糖的写法</h1>
       <h2>{{message}}</h2>
       <button @click="updateMessage">修改message的基本信息</button>
        <Showinfo></Showinfo>
    </div>
</template>


<script setup>
// 导入文件包名
import {ref} from 'vue'
import Showinfo from './components/Showinfo.vue'
    let message=ref("Hello SetUp")

    function updateMessage(){
        message.value='SetUp Hello'
    }


</script>



<style scoped>

</style>

<template>
    <div class="Showinfo">
        <h1>Showinfo</h1>

    </div>
</template>


<script>

export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:'Showinfo',
    data(){
        return{
            message:"Hello world vue cli"
        }
    },
    methods:{
        btnclick(){
            console.log("为难忘")
        }
    }

}
</script>



<style scoped>

</style>

import { createApp } from 'vue'
// import App from './App.vue'

// import App from './01_Vue3的起步setup函数的使用/App.vue'

// import App from './02-1_Vue3.0对Composion的补充/App.vue'

// import App from './02_Vue3Composition基本使用 API/App.vue'

// import App from './03_Vue3函数封装的思想/App.vue'


// import App from './04_ReactivApl基本使用/App.vue'


import App from './05_SetUp函数的语法糖的写法/App.vue'

// import App from './06_案例实战/App.vue'



createApp(App).mount('#app')