Vue3.X之常用Composition-Api

Composition API : 一组低侵入式的、函数式的 API，它使我们能够更灵活地「组合」组件的逻辑。

一、setup() 函数
（1）在学习 Composition-Api 之前，我们需要先了解一下 setup() 函数。setup()函数是vue3的新内容，它为基于 Composition API 的新特性提供了统一的入口。

在vue3中，定义的methods、data、watch、computed等都可以放到setup()函数中

（2）setup()函数执行时机
setup()函数会在created()生命周期之前执行。
beforecreated(),
setup(),
created(),

(3)参数
setup() 函数的第一个参数是 props ，组件接收的 props 数据可以在 setup() 函数内访问到。

setup(props) {
    console.log(props.p1)
}

context上下文对象
context 是 setup() 的第二个参数，它是一个上下文对象，可以通过 context 来访问Vue的实例 this 。

setup(props,context) {
    console.log(this)
    console.log(context)
}

注意：在 setup() 函数中访问不到Vue的 this 实例

二、 Composition-Api

1. ref()
   ref() 函数可以根据给定的值来创建一个响应式的数据对象，返回值是一个对象，且只包含一个 .value 属性。

<template>
  <!-- 使用响应式对象 -->
  <div>{{ msg }}的年龄为{{ age }}</div>
  <button @click="add">加1</button>
</template>

<script>
import { ref } from "vue"; //引入ref
export default {
  name: "App",
  setup() {
    // 创建响应式对象
    const age = ref(18);
    const msg = ref("孟");
    function add() {
      age.value += 1;  //需要.value访问
    }
    return { age, msg, add };
  },

};

在 setup() 函数内，由 ref() 创建的响应式数据返回的是对象，所以需要用 .value 来访问； 在 setup()
函数外部则不需要 .value ，直接访问即可。
可以在 reactive 对象中访问 ref() 函数创建的响应式数据。 新的 ref()
会覆盖旧的 ref() 。

2、计算属性
computed() 用来创建计算属性，返回值是一个 ref() 实例。按照惯例，使用前需要先引入。

<template>
  <!-- 使用响应式对象 -->
  <div>{{doubleAge}}</div>
</template>

<script>
import { computed, ref } from "vue"; //引入ref
let a=18;
export default {
  name: "App",
  setup() {
    // 创建响应式对象
    const age = ref(a);
    const doubleAge=computed(()=>{  //计算属性
      return age.value*2;
    })

    return { doubleAge };
  },
};
</script>

3、reactive（）
reactive() 函数接收一个普通的对象，返回出一个响应式对象。

在Vue2.x的版本中，我们只需要在 data() 中定义一个数据就能将它变为响应式数据，在 Vue3.0 中，需要用 reactive
函数或者 ref 来创建响应式数据

<template>
  <!-- 使用响应式对象 -->
  <div>{{ state.msg }}的年龄为{{ state.age }}</div>
  <div>{{ state.doubleAge }}</div>
  <button @click="add">加1</button>
</template>

<script>
import { computed, reactive } from "vue"; //引入ref
export default {
  name: "App",
  setup() {
    // 创建响应式对象
    const state = reactive({
      msg: "meng",
      age: 18,
      doubleAge: computed(() => {
        return state.age * 2;
      }),
    });

    function add() {
      state.age += 1;
    }
    return { add, state };
  },
};
</script>

4、readonly()
取得一个对象（反应性或普通）或ref并返回一个只读代理。这个代理是深层次的，对象内部的数据也是只读的。
传入普通对象等返回只读代理。
传入普通数值或字符串不能变成只读，例如 readonly(‘abc’)

<template>
  <div>
    <p>{{state.name}}</p>
    <p>{{state.attr.age}}</p>
    <p>{{state.attr.height}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>

  import {shallowReadonly} from 'vue'
export default {
  name: 'App',
  setup() {
    // readonly:用于创建一个只读的数据, 并且是递归只读
    let state = shallowReadonly({name:'lnj', attr:{age:18, height: 1.88}});
   
    function myFn() {
      state.name = '知播渔';
      state.attr.age = 666;
      state.attr.height = 1.66;
      console.log(state);

    }
    return {state, myFn};
  }
}
</script>

<style>

</style>

5、watch和watcheffect
watchEffect() 会立即执行传入的函数，并响应式侦听其依赖，并在其依赖变更时重新运行该函数。
watch 和 Vue2.x 中是一样的，watch 需要侦听数据，并执行它的侦听回调。默认情况下初次渲染不执行。

watch 与 watchEffect 的不同 watch 初次渲染不执行 watch 侦听的更具体 watch
可以访问侦听数据变化前后的值 watch 侦听单个数据源

侦听的数据可以是个 reactive 创建出的响应式数据（拥有返回值的 getter 函数），也可以是个 ref

<template>
  <router-view></router-view>
  <!-- reactive使用响应式对象 -->
  <div>{{ state.msg }}的年龄为{{ state.age }}</div>
  <div>{{ state.doubleAge }}</div>

  <!-- <div>hahah{{ state.copy.age }}</div> -->
  <button @click="add">加1</button>
</template>

<script>
import { computed, reactive, readonly, watch, watchEffect } from "vue"; //引入ref
export default {
  name: "App",
  setup() {
    // 创建响应式对象
    const state = reactive({
      msg: "meng",
      age: 18,
      doubleAge: computed(() => {
        return state.age * 2;
      }),
    });
    const state1 = reactive({ count: 0 });

    const copy = readonly(state);
    watch(() => {
      state.doubleAge,
        (newValue, oldVal) => {
          console.log(`原值为${oldVal}`);
          console.log(`新值为${newValue}`);
        };
    });
    // 1秒后将state.count的值+1
    setTimeout(() => {
      state1.count++;
    }, 1000);
    watchEffect(() => {
      // 依赖追踪
      console.log(`count值${state1.count}`);
      console.log(`age值${copy.age}`);
      console.log(`age11值${state.age}`);
    });

    function add() {
      state.age += 1;
    }
    return { add, state, copy };
  },
};
</script>