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";
// props
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  isShow: {
    type: Boolean,
    default: false,
  },
});
console.log("......props", props);
// emit
const 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>