初始vue3（一）：setup、reactive、toRefs、ref、readonly、computed、片段

以下内容是对 官网的一些记录和理解，官网写的很详细。

创建一个 Vue3 项目

因为以前做的 Vue2 的项目是用 vue-cli 创建的，所以这次继续使用 vue-cli 来创建 Vue3 的项目。有兴趣的可以试试官方新推出的脚手架Vite。

1、安装vue-cli脚手架

npm install -g @vue/cli

2、创建一个项目

vue create hello-vue3

创建时选择了如下一些配置，可以根据自己的需要来选择。

3、启动项目

cd vue3-admin
npm run serve

生命周期

vue3 的生命周期钩子函数接受一个回调函数，当钩子被组件调用时将会被执行。

// vue2和vue3的写法不一样，vue3是在defineComponent中，需要引入defineComponent函数
// vue2
<script>
export default {
  data() {
    return {
      bread: [],
    };
  },
};
</script>
// vue3中使用某个生命周期需要引入相应的生命周期钩子。
// vue3
<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onActivated,
  onDeactivated,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default defineComponent({
  name: "Home",
  setup() {
    console.log("--setup--原beforeCreate、created阶段");
    onBeforeMount(() => {
      console.log("--onBeforeMount--原beforeMount");
    });
    onMounted(() => {
      console.log("--onMounted--原mounted");
    });
    onActivated(() => {
      console.log("--onActivated--原activated");
    });
    onDeactivated(() => {
      console.log("--onDeactivated--原deactivated");
    });
    onBeforeUpdate(() => {
      console.log("--onBeforeUpdate--原beforeUpdate");
    });
    onUpdated(() => {
      console.log("--onUpdated--原updated");
    });
    onBeforeUnmount(() => {
      console.log("--onBeforeUnmount--原beforeDestroy");
    });
    onUnmounted(() => {
      console.log("--onUnmounted--原destroyed");
    });
    return {};
  },
});
</script>

组合式 API

setup 组件

作用：将与同一个逻辑关注点相关的代码配置在一起，使理解和维护复杂组件变得简单。

setup 接受两个参数：props、context

• props：父组件传入的并且在当前组件props中声明的属性（响应式，当传入新的 prop 时，它将被更新）
• context：一个简单对象，包含三个属性（不是响应式的，可以安全地对 context 使用 ES6 解构）
  • attrs：接受父组件传入的没有在当前组件props中声明的属性
  • slots：接受父组件传过来的插槽
  • emit：用来分发自定义事件的函数

响应性 API

Vue2 不能检测数组和对象的变化（vue2响应性）：

• 对象添加新的属性或删除已有属性，不会响应
• 通过索引设置数组项或修改数组长度，不会响应

vue3 解决了上面两个问题。

reactive 方法

作用：使对象具有响应性

<template>
  <div>num:{{ num }}</div>
  <div>str:{{ str }}</div>
  <div>boo:{{ boo }}</div>
  <div>obj:{{ obj }}</div>
  <div>arr:{{ arr }}</div>
  <button @click="handleUpdate">update</button> // 点击update后对象里的属性更新
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
} from "vue"; // 引入需要用到的方法
export default defineComponent({
  name: "Home",
  setup() {
    // 定义响应式对象，定义的data是一个Proxy对象，与原始对象不相等（===）
    const data = reactive({
      num: 0,
      str: "hello",
      boo: false,
      obj: { a: "1", b: "2" },
      arr: [1, 2, 3],
    });
    // 定义一个方法，更改对象的属性
    const handleUpdate = () => {
      data.num++;
      data.str += "world";
      data.boo = !data.boo;
      data.obj.a += "1";
      data.arr[1] = 22;
    };
    // 把定义的对象和方法都return出去
    return {
      ...toRefs(data), // 使用扩展运算符和解构会使属性的响应性丢失，所以要使用toRefs，下面会讲到
      handleUpdate,
    };
  },
});
</script>

toRefs 方法

作用：将响应式对象转换成普通对象，返回的普通对象的所有属性都具有响应性

ref 方法

作用：将原始值变为响应式对象，可以设置他的初始值，该对象只包含一个 value 属性

<template>
  <div>num2:{{ num2 }}</div> // 在模板中访问时，会自动展开为内部值，不需要追加.value
  <button @click="handleUpdate">update</button> // 更新数据发现num2是响应式的
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
} from "vue";

export default defineComponent({
  name: "Home",
  setup() {
    // 定义一个num2，使其为响应式的，并设置初始值为2
    let num2 = ref(2);
    const handleUpdate = () => {
      num2.value++; // 在js中更改num2的值时需要追加.value
    };
    return {
      num2
    };
  },
});
</script>

readonly 方法

作用：接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。只读代理是深层的：任何被访问的嵌套属性也是只读的。修改只读属性将导致失败并出现警告。

computed 方法

说明：计算属性

• 接受一个（getter）函数，并返回一个 readonly 的响应式对象。

<template>
  <div>count:{{ count }}</div>
  <div>plusOne: {{ plusOne }}</div>
  <button @click="handleUpdate">update</button> // count.value++之后，plusOne的值会响应
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
} from "vue";

export default defineComponent({
  name: "Home",
  setup() {
    const count = ref(1);
    // 定义一个计算属性
    const plusOne = computed(() => count.value + 1); // plusOne.value++会报错
    const handleUpdate = () => {
      count.value++;
    };
    return {
      handleUpdate,
      count,
      plusOne,
    };
  },
});
</script>

• 也可以使用具有 get 和 set 函数的对象来创建可写的 ref 对象。

<template>
  <div>count:{{ count }}</div>
  <div>
    plusTwo:
    <input
      :value="plusTwo"
      type="text"
      @input="inputPlusTwo($event.target.value)"
    /> // 修改plusTwo的值，count的值会响应
  </div>
  <button @click="handleUpdate">update</button> // 修改count的值，plusTwo的值会响应
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
} from "vue";

export default defineComponent({
  name: "Home",
  setup() {
    const count = ref(1);
    // 传入具有get、set函数的对象来创建一个可写的ref对象
    const plusTwo = computed({
      get: () => count.value + 2,
      set: (val) => {
        count.value = val - 2;
      },
    });
    const handleUpdate = () => {
      count.value++;
    };
    const inputPlusTwo = (val: number) => {
      plusTwo.value = val;
    };

    return {
      handleUpdate,
      inputPlusTwo,
      count,
      plusTwo,
    };
  },
});
</script>

watchEffect 方法

watch 方法

要了解更多API可查看官方网站

片段

Vue 3 现在正式支持了多根节点的组件，也就是片段。我们可以看到上面template中可以包含多个根节点。

好处: 减少标签层级, 减小内存占用