Vue3，setup()

setup函数有两个参数：{Data} props和{SetupContext} context

props是响应式的；context是普通的js对象，不是响应式的，context有三个属性：1、attrs：包含父组件属性绑定、未识别出的为组件属性或自定义事件的事件；2、slots：插槽；3、emit：通知（发出的事件）。

渲染功能的实现

setup也可以返回一个渲染函数，该函数可以直接使用在同一作用域中（setup 函数中）声明的反应状态。

this指向问题

setup()中，this为undefined而不是组件的引用，setup函数执行时，尚未创建组件实例。this在setup中无法正常使用。

当setup函数和其他的Options API一起使用时，可能会出现无法预知的错误，所以一定要谨慎。

生命周期钩子

在setup()中，可以通过onXx的方式注册生命周期钩子。

ref()函数的作用

1、把一个非响应式的数据改变为响应式的数据。

2、使用ref获取元素或组件实例。

Vue3代码案例

代码案例一：渲染功能的实现

views/demo/demo07/demo07Manage.vue

<template></template><script>import { ref, reactive, h } from "vue";import MyChild from "./childComponent.vue";export default {  name: "demo07",  // setup返回一个渲染函数  setup() {    const name = ref("父组件.Demo07");    const count = ref(123);    const book = reactive({ title: "标题" });    const list = reactive([      {        id: 1,        text: "北京",      },      {        id: 2,        text: "上海",      },      {        id: 3,        text: "太原",      },    ]);    // 改变count    function changeCount() {      count.value++;      console.log("count", count.value);    }    // 子组件        let data = reactive({      title: "Demo7测试案例",      isShow: true    });    // 返回    return () => [      h("h1", [name.value]),      h("span", { className: "spanStyle" }, [count.value, book.title]),      h("button", { onClick: changeCount }, "加加"),      // 循环渲染      h("ul", list.map((item) => {          return h("li", item.text);        })      ),      //渲染导入的组件      h(MyChild, data),    ];  },};</script><style>#demo07 {  background-color: rgb(230, 226, 211);}.spanStyle {  display: block;  color: rgb(214, 63, 214);}</style>

views/demo/demo07/childComponent.vue

<template>  <div id="demo07Child">    <h3>{{ name }}</h3>    <div class="menu">{{ title }}================={{ isShow }}</div>    <button @click="childClick">信息:{{ props.title }}</button>  </div></template><script setup>import { defineProps, defineEmits, defineExpose, ref, reactive } from "vue";// propsconst props = defineProps({  title: {    type: String,    default: "",  },  isShow: {    type: Boolean,    default: false,  },});console.log("......props", props);// emitconst emit = defineEmits(["change"]);console.log("......emit", emit);//const count = ref(0);defineExpose({  count: count,});//let name = ref("子组件.Demo07");let data = reactive({  //});function childClick() {  count.value += 1;  console.log("count.value", count.value);  // 向父组件发送数据  // emit("change", new Date().getTime() + "");}</script>

代码案例二：生命周期钩子

views/demo/demo08/demo08Manage.vue

<template>  <div id="demo08">    <h1>{{ name }}</h1>    <h3>鼠标在页面的位置：x={{x}} y={{y}}</h3>  </div></template><script>import { ref, reactive, onBeforeMount,onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured } from "vue";export default {  name: "demo08",  // setup返回一个渲染函数  setup() {    const name = ref("父组件.Demo08");    // 1、生命周期函数：组件挂载到节点上之前执行    onBeforeMount(()=>{      console.log('vue3 ==> beforeMount()');      console.log('vue2 ==> beforeMount()');    });    let x = ref(0);	  let y = ref(0);    // 2、生命周期函数：组件挂载完成后执行    onMounted(() => {      console.log('vue3 ==> mounted()');      console.log('vue2 ==> mounted()');      window.addEventListener('mousemove', e => {        x.value = e.pageX;        y.value = e.pageY;      })    });    // 3、生命周期函数：组件更新之前执行    onBeforeUpdate(()=>{      console.log('vue3 ==> beforeUpdate()');      console.log('vue2 ==> beforeUpdate()');    });    // 4、生命周期函数：组件更新完成之后执行    onUpdated(() => {      console.log('vue3 ==> updated()');      console.log('vue2 ==> updated()');    });    // 5、生命周期函数：组件卸载之前执行    onBeforeUnmount(()=>{      console.log('vue3 ==> beforeUnmount()');      console.log('vue2 ==> beforeDestroy()');    });    // 6、生命周期函数：组件卸载完成后执行    onUnmounted(() => {      console.log('vue3 ==> unmounted()');      console.log('vue2 ==> destroyed()');    });    // 7、生命周期函数：当捕获一个来自子孙组件的异常时激活钩子函数    onErrorCaptured(() => {      console.log('vue3 ==> errorCaptured()');      console.log('vue2 ==> errorCaptured()');    });    //x,y可以在组件中使用    return {      name,      x,       y    };  },};</script><style>#demo08 {  background-color: rgb(223, 214, 171);}</style>