一、ref函数的使用

①、引入响应ref函数，

import { ref } from "vue";

②在setup函数当中使用ref函数监听数据

// 单项数据流，改变不会影响页面的渲染
    let name = "张三";
    let age = 18;

    // 响应式数据  基本数据类型返回的是一个refimpl对象
    let name2 = ref("李四");
    let age2 = ref(20);
    // 响应式数据  复杂数据类型返回的是一个proxy对象
    let obj = ref({
      type: "前端工程师",
      salary: "30k",
    });

③、ref函数返回的是一个RefImpl对象

以下就是ref函数
RefImpl：{__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: '李四', _value: '李四'}dep: Set(1) {ReactiveEffect}__v_isRef: true__v_isShallow: false_rawValue: "李四"_value: "李四"value: (...)[[Prototype]]: Object '2222222'

④、ref只能监听一维对象无法检测到深层次的对象，且每次取值都需要带value才能取到值

    // 改变数据
    function changeData() {
      // 点击该方法，页面上的数据是不会跟着响应的
      name = "王五";
      age = 38;
      // 为什么是.value原因是ref方法实现响应式数据的条件，但是他返回的
      // 是一个对象，而我们要改变对应的值则需要.value才可以实现相对应的相应数据
      name2.value = "刘六";
      age2.value = 40;
      // 重点对象与基本数据类型的区别
      obj.value.type = "ui设计师";
      obj.value.salary = "20k";
    }
    // 

⑤、标签内如何使用响应式数据？？？

  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
   <button @click="changeData">改变数据查看数据的变化情况</button>
  <h2>姓名：{{ name2 }}</h2>
  <h2>年龄：{{ age2 }}</h2>

二、 reactive函数的使用

①、引入响应reactive函数

import { reactive } from "vue";

②在setup函数当中使用reactive函数监听数据

  let person = reactive({
      type: "前端工程师",
      salary: "30k",
      body:{
        height:178,
        weight:120,
      }
    });

③、reactive函数返回的是一个Proxy对象

1.  Proxy {type: '前端工程师', salary: '30k', body: {…}}
[[Handler]]: Object
      deleteProperty: ƒ deleteProperty(target, key)
      get: ƒ (target, key, receiver)
      has: ƒ has(target, key)
      ownKeys: ƒ ownKeys(target)
      set: ƒ (target, key, value, receiver)

④、reactive函数可以监听含有多维属性的对象，无论数据层级多深都可以监听到，他是es6新增的方法

三、setup函数

①、setup函数 是先于beforecreate函数执行的，所以在setup函数当中打印this是会返回undefined ②、setup函数接收两个参数：参数一：props父传子属性接受属性，参数二：context

 setup(props, context) {
    let person = reactive({
      firstName: "张",
      lastName: "三",
    });

    //  该处就是计算属性的写法--简写（没有考虑到计算属性被修改的情况）
    // person.fullName = computed(() => {
    //   return person.firstName+ "-" + person.lastName;
    // });

    //  该处就是计算属性的写法--完整写法（计算属性可以被修改）
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const name = value.split("-");
        person.firstName = name[0];
        person.lastName = name[1];
      },
    });

    // 返回一个对象（常用）
    return { person };
  },

③、context打印出的数据其实就是vue实列

1.  {expose: ƒ}
1.  1.  attrs: Proxy
    1.  emit: (event, ...args) => instance.emit(event, ...args)
    1.  expose: exposed => {…}
    1.  slots: Proxy

②、emit属性子传父：

setup(props, context) {
   // 子传父的方法，
    function test() {
      // context就是相当于vue且有一个内置方法emit
      context.emit("hello", 6666);
    }
        // 返回一个对象（常用）
    return { test };
  },

②、slots属性插槽：