今天给小伙伴们分享一个vue3.0知乎实战项目示例Vue3Zhihu。

vue3-zhihu 基于vue3.x+vuex+vue-router4构建的知乎专栏示例。汇集了vue3相关技术知识点，旨在让大家更快入手vue3项目开发。

快速安装

# 克隆项目
git clone https://github.com/huanggengzhong/zhihu-vue3.0.git

# 进入目录
cd zhihu-vue3.0

# 安装依赖
npm install

# 本地开发
npm run serve

# 打包项目
npm run build

vue3整体下来有些类似React Hook的感觉。只要是能简化代码，提升性能都有必要去学习下。

知识点

setup(props, this(上下文对象))

vue2.x中data、methods、watch等全部都用对应的新增api写在setup()函数中。

• 执行时机在beforecreate与created之间。vue3也是取消了这两个钩子，统一用setup代替；
• 所有方法函数都得调用api写在setup中；
• return出去的数据，类似vue2.x中data(){return{...}}；

ref()函数

ref也是创建响应式数据，区别在于要用xxx.value才能访问到数据值，推荐用ref，然后配合reactive一起使用。

<template>
  <div>
    <!-- setup的使用 -->
    <h1>{{count}}</h1>
    <button @click="increase">加</button>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
  setup() {
    const count = ref(0);
    const increase = () => {
      count.value++; //注意这里要用value
    };
    return {
      count,
      increase
    };
  }
};
</script>

reactive({})函数

该函数传入一个对象，里面的数据会变成响应式的数据，类似于react中的state。

<template>
  <!-- reactive函数的使用 -->
  <div>
    <h1>{{data.count}}</h1>
    <h1>{{data.double}}</h1>
    <button @click="data.increase">加</button>
  </div>
</template>
<script lang="ts">
import { ref, computed, reactive } from "vue";
interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}
export default {
  setup() {
    const data: DataProps = reactive({
      //这里传入的是对象
      count: 0,
      increase: () => {
        data.count++;
      },
      double: computed(() => data.count * 2)
    });
    return {
      data
    };
  }
};
</script>

toRefs()函数

用 toRefs 函数来包裹 reactive 数据,用来添加响应式。

<template>
  <!-- 使用toRefs来去除多余的data -->
  <div>
    <h1>{{count}}</h1>
    <h1>{{double}}</h1>
    <button @click="increase">加(使用toRefs)</button>
  </div>
</template>
<script lang="ts">
import { ref, computed, reactive, toRefs } from "vue";
interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}
export default {
  setup() {
    const data: DataProps = reactive({
      count: 0,
      increase: () => {
        data.count++;
      },
      double: computed(() => data.count * 2)
    });
    // 这里用toRefs来包裹,使它变为响应式数据
    const refData = toRefs(data);
    return {
      // 这里解构
      ...refData
    };
  }
};
</script>

computed() 函数

该函数用来创造计算属性，和过去一样，它返回的值是一个ref对象。

vue3全新生命周期(只能在setup中使用)

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

好了，以上是vue3的一些简单分享，后续会使用vue3开发一个实例项目，届时也会分享出来。